爱站程序员基地一、CSS Sprite（雪碧图）
CSS Sprite也叫CSS精灵、CSS雪碧图，是一种网页图片应用处理方式。它允许你将一个页面涉及到的所有零星图片都包含到一张大图中去，这样一来，当访问该页面时，由从前的多次请求变为一次请求。客户端每显示一图片都会向服务器发送请求，所以图片越多请求越多，造成延迟的可能性越大。所以页面有许多icon时，推荐使用CSS Sprite。
CSS Sprite原理：
其实就是把网页中的一些背景图片整合到一张图片文件中，再利用CSS的
background-image
、
background-repeat
、
background-position
属性，对这张大图进行定位。
background-position
可以用数字能精确的定位出背景图片的位置。
CSS Sprite优点：
1. 利用CSS Sprite能很好地减少了网页的http请求，从而大大的提高了页面的性能，这也是CSS Sprites最大的优点，也是其被广泛传播和应用的主要原因；
2. CSS sprite能减少图片的字节，(网络传输以字节为单位 ，1MB=1024千字节)，三张图片大小的总合大于拼成一张图片的大小。
3. 解决了命名困扰，只需要对一张图片命名，而非数十个小图片命名
用一句话来概述就是
“CSS Sprites(图片整合技术) 的目的就是通过整合图片，减少对服务器的请求数量，从而加快页面加载速度。”
怎么制作CSS Sprite图
我们程序员一般通过雪碧图生成工具来制作雪碧图
如何使用雪碧生成工具
1.用PS把需要的图切出来
2.打开CssSprite.exe文件
下载地址：http://download.csdn.net/detail/wx247919365/8641795
3.点击左上角按钮打开图片
4.排列图片
可以点击按钮来排列 ，也可以自己拖动排列，拖动完程序会根据图片的位置生成面积最小的雪碧图
5.是否是手机端
勾选后雪碧图的大小会缩小2倍
6.代码生成
有sass和css两个选项，选择后者。sass是一种CSS预处理语言，能清晰的、结构化的描述文件样式。
7.大图类型要选择png，图片背景色为Transparent透明
<!DOCTYPE html><html><head lang=\"en\"><meta charset=\"UTF-8\"><title>雪碧图</title><style>div{width: 131px;height: 130px;border: 1px solid red;background-image: url(\"img/img.png\");}.two{width: 131px;height: 162px;background-position: -131px 0;}.three{width: 131px;height: 162px;background-position: -262px 0;}</style></head><body><div class=\"one\"></div><div class=\"two\"></div><div class=\"three\"></div><div class=\"fore\"></div><div class=\"five\"></div><div class=\"six\"></div></body></html>
二、滑动门
1.1 为了使各种特殊形状的背景能够自适应元素中文本内容的多少， 出现了CSS滑动门技术。
1.2 使各种特殊形状的背景能够自由拉伸滑动，以适应元素内部的 文本内容，可用性更强。
1.3 最常见于各种导航栏的滑动门。
<!DOCTYPE html><html><head lang=\"en\"><meta charset=\"UTF-8\"><title>滑动门</title><style>*{margin: 0;padding: 0;}a{margin: 100px;display: inline-block;/*千万不能设置宽*/height: 33px;background: url(\"img/lTcb_ve.png\") no-repeat;padding-left: 15px;color: #fff;text-decoration: none;line-height: 33px;}a span{display: inline-block;/*千万不能设置宽*/height: 33px;background: url(\"img/lTcb_ve.png\") no-repeat right;padding-right: 15px;}</style></head><body><a href=\"#\"><span>首页</span></a><a href=\"#\"><span>开发平台</span></a><a href=\"#\"><span>北京尚学堂</span></a></body></html>
微信导航栏
<!DOCTYPE html><html><head lang=\"en\"><meta charset=\"UTF-8\"><title>微信导航栏(一)</title><style>*{margin: 0;padding: 0;}ul{list-style: none;}body{background: url(\"img/wrap.jpg\") repeat-x;}.nav{height: 75px;}.nav li a{display: block;background: url(\"img/lTcb_ve.png\") no-repeat;padding-left: 15px;color: #fff;font-size: 14px;line-height: 33px;text-decoration: none;}.nav li a span{display: block;line-height: 33px;background: url(\"img/lTcb_ve.png\") no-repeat right center;padding-right: 15px;}.nav li a:hover{background-image: url(\"img/ao.png\") ;}.nav li a:hover span{background-image: url(\"img/ao.png\") ;}.nav li{float: left;margin: 0 10px;padding-top: 21px;}</style></head><body><div class=\"nav\"><ul><li><a href=\"#\"><span>首页</span></a></li> <li><a href=\"#\"><span>帮助与反馈</span></a></li> <li><a href=\"#\"><span>公众平台</span></a></li> <li><a href=\"#\"><span>开放平台</span></a></li> <li><a href=\"#\"><span>微信支付</span></a></li> <li><a href=\"#\"><span>微信网页版</span></a></li> <li><a href=\"#\"><span>表情开发平台</span></a></li> <li><a href=\"#\"><span>微信广告</span></a></li></ul></div></body></html>
