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

    你可能感兴趣的文章
    MTTR、MTBF、MTTF的大白话理解
    查看>>
    mt_rand
    查看>>
    mysql -存储过程
    查看>>
    mysql /*! 50100 ... */ 条件编译
    查看>>
    mudbox卸载/完美解决安装失败/如何彻底卸载清除干净mudbox各种残留注册表和文件的方法...
    查看>>
    mysql 1264_关于mysql 出现 1264 Out of range value for column 错误的解决办法
    查看>>
    mysql 1593_Linux高可用(HA)之MySQL主从复制中出现1593错误码的低级错误
    查看>>
    mysql 5.6 修改端口_mysql5.6.24怎么修改端口号
    查看>>
    MySQL 8.0 恢复孤立文件每表ibd文件
    查看>>
    MySQL 8.0开始Group by不再排序
    查看>>
    mysql ansi nulls_SET ANSI_NULLS ON SET QUOTED_IDENTIFIER ON 什么意思
    查看>>
    multi swiper bug solution
    查看>>
    MySQL Binlog 日志监听与 Spring 集成实战
    查看>>
    MySQL binlog三种模式
    查看>>
    multi-angle cosine and sines
    查看>>
    Mysql Can't connect to MySQL server
    查看>>
    mysql case when 乱码_Mysql CASE WHEN 用法
    查看>>
    Multicast1
    查看>>
    mysql client library_MySQL数据库之zabbix3.x安装出现“configure: error: Not found mysqlclient library”的解决办法...
    查看>>
    MySQL Cluster 7.0.36 发布
    查看>>