博客
关于我
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/

    你可能感兴趣的文章
    mysql 往字段后面加字符串
    查看>>
    mysql 快照读 幻读_innodb当前读 与 快照读 and rr级别是否真正避免了幻读
    查看>>
    MySQL 快速创建千万级测试数据
    查看>>
    mysql 快速自增假数据, 新增假数据,mysql自增假数据
    查看>>
    MySql 手动执行主从备份
    查看>>
    Mysql 批量修改四种方式效率对比(一)
    查看>>
    Mysql 报错 Field 'id' doesn't have a default value
    查看>>
    MySQL 报错:Duplicate entry 'xxx' for key 'UNIQ_XXXX'
    查看>>
    Mysql 拼接多个字段作为查询条件查询方法
    查看>>
    mysql 排序id_mysql如何按特定id排序
    查看>>
    Mysql 提示:Communication link failure
    查看>>
    mysql 插入是否成功_PDO mysql:如何知道插入是否成功
    查看>>
    Mysql 数据库InnoDB存储引擎中主要组件的刷新清理条件:脏页、RedoLog重做日志、Insert Buffer或ChangeBuffer、Undo Log
    查看>>
    mysql 数据库中 count(*),count(1),count(列名)区别和效率问题
    查看>>
    mysql 数据库备份及ibdata1的瘦身
    查看>>
    MySQL 数据库备份种类以及常用备份工具汇总
    查看>>
    mysql 数据库存储引擎怎么选择?快来看看性能测试吧
    查看>>
    MySQL 数据库操作指南:学习如何使用 Python 进行增删改查操作
    查看>>
    MySQL 数据库的高可用性分析
    查看>>
    MySQL 数据库设计总结
    查看>>