博客
关于我
CSS高级技巧——精灵技术和滑动门
阅读量:258 次
发布时间:2019-03-01

本文共 1844 字,大约阅读时间需要 6 分钟。

CSS精灵技术

1. CSS精灵技术(sprite)

1.1 为什么需要精灵技术

图所示为网页的请求原理图,当用户访问一个网站时,需要向服务器发送请求,网页上的每张图像都要经过一次请求才能展现给用户。

然而,一个网页中往往会应用很多小的背景图像作为修饰,当网页中的图像过多时,服务器就会频繁地接受和发送请求,这将大大降低页面的加载速度。

为了有效地减少服务器接受和发送请求的次数,提高页面的加载速度。

出现了CSS精灵技术(也称CSS Sprites、CSS雪碧)。

1.2 精灵技术本质

CSS 精灵其实是将网页中的一些背景图像整合到一张大图中(精灵图),然而,各个网页元素通常只需要精灵图中不同位置的某个小图,要想精确定位到精灵图中的某个小图。

这样,当用户访问该页面时,只需向服务发送一次请求,网页中的背景图像即可全部展示出来。

我们需要使用CSS的

  • background-image、
  • background-repeat
  • background-position属性进行背景定位,
  • 其中最关键的是使用background-position 属性精确地定位。

首先我们知道,css精灵技术主要针对于背景图片,插入的图片img 是不需要这个技术的。

  1. 精确测量,每个小背景图片的大小和 位置。
  2. 给盒子指定小背景图片时, 背景定位基本都是 负值。

1.3 制作精灵图

CSS 精灵其实是将网页中的一些背景图像整合到一张大图中(精灵图),那我们要做的,就是把小图拼合成一张大图。

大部分情况下,精灵图都是网页美工做。

我们精灵图上放的都是小的装饰性质的背景图片。 插入图片不能往上放。我们可以横向摆放也可以纵向摆放,但是每个图片之间留有适当的空隙在我们精灵图的最低端,留一片空隙,方便我们以后添加其他精灵图。

结束语: 小公司,背景图片很少的情况,没有必要使用精灵技术,维护成本太高。 如果是背景图片比较多,可以建议使用精灵技术。

2. 滑动门

先来体会下现实中的滑动门,或者你可以叫做推拉门:

2.1滑动门出现的背景

制作网页时,为了美观,常常需要为网页元素设置特殊形状的背景,比如微信导航栏,有凸起和凹下去的感觉,最大的问题是里面的字数不一样多,咋办?

为了使各种特殊形状的背景能够自适应元素中文本内容的多少,出现了CSS滑动门技术。它从新的角度构建页面,使各种特殊形状的背景能够自由拉伸滑动,以适应元素内部的文本内容,可用性更强。 最常见于各种导航栏的滑动门。

http://weixin.qq.com/

2.2核心技术

核心技术就是利用CSS精灵(主要是背景位置)和 盒子padding撑开宽度, 以便能适应不同字数的导航栏。

一般的经典布局都是这样的:

  • 导航栏内容
  • css样式

    * {         padding:0;      margin:0;    }    body{         background: url(images/wx.jpg) repeat-x;    }    .father {         padding-top:20px;    }    li {         padding-left: 16px;      height: 33px;      float: left;      line-height: 33px;      margin:0  10px;      background: url(./images/to.png) no-repeat left ;    }    a {         padding-right: 16px;      height: 33px;      display: inline-block;      color:#fff;      background: url(./images/to.png) no-repeat right ;      text-decoration: none;    }    li:hover,     li:hover a {         background-image:url(./images/ao.png);    }

    总结:

    1. a 设置 背景左侧,padding撑开合适宽度。
    2. span 设置背景右侧, padding撑开合适宽度 剩下由文字继续撑开宽度。
    3. 之所以a包含span就是因为 整个导航都是可以点击的。

    转载地址:http://vtux.baihongyu.com/

    你可能感兴趣的文章
    mpvue的使用(一)必要的开发环境
    查看>>
    MQ 重复消费如何解决?
    查看>>
    mqtt broker服务端
    查看>>
    MQTT 保留消息
    查看>>
    MQTT 持久会话与 Clean Session 详解
    查看>>
    MQTT工作笔记0007---剩余长度
    查看>>
    MQTT工作笔记0009---订阅主题和订阅确认
    查看>>
    Mqtt搭建代理服务器进行通信-浅析
    查看>>
    MS Edge浏览器“STATUS_INVALID_IMAGE_HASH“兼容性问题
    查看>>
    ms sql server 2008 sp2更新异常
    查看>>
    MS UC 2013-0-Prepare Tool
    查看>>
    MSBuild 教程(2)
    查看>>
    msbuild发布web应用程序
    查看>>
    MSB与LSB
    查看>>
    MSCRM调用外部JS文件
    查看>>
    MSCRM调用外部JS文件
    查看>>
    MSEdgeDriver (Chromium) 不适用于版本 >= 79.0.313 (Canary)
    查看>>
    MsEdgeTTS开源项目使用教程
    查看>>
    msf
    查看>>
    MSSQL数据库查询优化(一)
    查看>>