10.css精灵（Sprites）&滑动门&圆角及其扩展
滑动门与圆角
什么是滑动门 ?
1. 滑动门并不是一项全新的技术，它是利用背景图像的可层叠性，并允许他们在彼此之上进行滑动，以创造一些特殊的效果。
详解
难题
1. 假设需要实现下图中的菜单
分析
1. 难点1
a) 每个菜单的左上角和右上角都是圆弧型状的
2. 难点2
a) 每个菜单的长度都不相同
解决
三层嵌套
思路
1. 将一个菜单按钮看成3部分，用PS切出左边和右边圆角部分，以及中间1px宽。
2. 写3个div，利用背景图像的可层叠性，底层div背景用“中间1px”平铺，次层用左边圆角，最上层用右圆角。
3. 底层div负责菜单的宽，底层和次层div不需要指定高，由最上层指定高来撑起，菜单内容需要写在最上层div中。
代码
|
<!DOCTYPE html> <html> <head> <meta charset="utf-8"/> <title>滑动门</title> <style> .btn{width:100px;background:url(bgc.jpg) repeat-x;} /* 底层指定宽 */ .btnL{background:url(bgL.jpg) no-repeat;} /* 次层指定左边圆弧，背景图片默认就置于左边 */ .btnR{background:url(bgR.jpg) no-repeat right 0;height:31px; /* 最上层指定右边圆弧和高 */ /* 下面是文字样式设置 */ text-align:center;color:#FFF;font-weight:bold;line-height:31px;} /* 最上层也指定文字 */ </style> </head> <body> <div class="btn"> <div class="btnL"> <div class="btnR">首页</div> </div> </div> </body> </html> |
效果
PS裁切下来的素材
1. bgc.jpg
2. bgL.jpg
3. bgR.jpg
小结
1. 优点：这种三层嵌套方案，扩展性很高，菜单的宽度可以随意设置，只需要修改“底层div”的宽度即可。
2. 缺点：嵌套层次多了些，有点麻烦。
3. 案例重构：只需要新建一个空的html文件，再将上面的“代码”复制到此html文件中，最后将上面“PS裁切下来的素材”都另存到此html文件同级目录下，浏览器打开即可。
两层嵌套
思路
1. 将一个菜单按钮看成2部分，用PS从左边圆弧一直到中间偏右的某个位置整个裁切下来，然后再单独将右圆弧部分裁切下来。
2. div设置的宽度小于背景图宽度时，背景图片默认从左边显示多少是多少。
3. 写两层div，底层div用左部分，上层用右圆弧部分。
4. 底层（父级）div负责宽，上层（子级）div负责内容和高。
a) 子级div宽度如果不指定，则默认撑满父级宽。
b) 父级高度如果不指定，子级的高度默认撑开父级高度。
代码
|
<!DOCTYPE html> <html> <head> <meta charset="utf-8"/> <title>滑动门</title> <style> .btnL{width:98px;background:url(bgL.png) no-repeat;} /*底层（父级）指定左大半部分和大部分宽 */ .btnR{background:url(bgR.png) no-repeat right 0;height:31px; /*上层（子级）指定右圆弧、高、文字 */ /* 下面是设置文字的样式 */ text-align:center;line-height:31px;font-weight:bold;color:#FFF;} </style> </head> <body> <div class="btnL"> <div class="btnR">首页</div> </div> </body> </html> |
效果
PS裁切下来的素材
1. bgL.png
2. bgR.png
小结
1. 优点：相对于“三层嵌套”少了一层div嵌套，并且少了一个样式代码。
2. 缺点：扩展性受到限制，对于对宽度扩展性要求大的地方有局限性。
a) 如：将上面代码中父级的宽度从98px改成100px后再运行效果如下：
b) 另外，如果图片太大的话客户端加载速度相对会较慢。
3. 案例重构：只需要新建一个空的html文件，再将上面的“代码”复制到此html文件中，最后将上面“PS裁切下来的素材”都另存到此html文件同级目录下，浏览器打开即可。
实战一（圆角菜单）
题目
1. 实现下图的菜单
答
第一步：分析
1. 整个导航栏可能扩展性要求很高，所以需要使用三层嵌套。
2. 而导航栏里面的单个菜单按钮对于扩展性要求不高，可以使用两层嵌套。
第二步：完成 结构 和 样式重置
|
<!DOCTYPE html> <html> <head> <meta charset="utf-8"/> <title>滑动门实战</title> <style> body,ul{margin:0;font-family:微软雅黑} ul{padding:0;list-style:none;} a{text-decoration:none;} </style> </head> <body> <div class="nav"> <!-- 底层：中间1px平铺 --> <div class="navL"> <!-- 次层：左边圆弧 --> <ul class="navR"> <!-- 上层：右边圆弧 --> <!-- 内容开始 --> <li> <a href="#"> <!-- 底层：左边大半部分 --> <span>MiaoV</span> <!-- 上层：右边圆弧 --> </a> </li> <li> <a href="#"> <span>课程</span> </a> </li> <li> <a href="#"> <span>关于我们</span> </a> </li> <li> <a href="#"> <span>加入MiaoV</span> </a> </li> <!-- 内容结束 --> </ul> </div> </div> </body> </html> |
第三步：完成代码
|
<!DOCTYPE html> <html> <head> <meta charset="utf-8"/> <title>滑动门实战</title> <style> body,ul{margin:0;font-family:"微软雅黑"} ul{padding:0;list-style:none;} a{text-decoration:none;} body{background:#23232f;padding:50px;} /* "中间1px平铺"就不需要了，因为用PS测量得到背景颜色是一个纯色， 不需要占用背景图片，直接指定背景颜色即可，一个元素可以同时拥 有背景图片和背景颜色，并且背景图片是盖在背景颜色上面的，这样 我们就可以将"次层"div中要设置的背景图片拿到"底层"div中了， 次层也就可以去掉不要了。另外，为了让内容撑开宽度，我们添加了浮动。 */ .nav{background:url(bgL.jpg) #0f0f14 no-repeat;float:left;} .navR{background:url(bgR.jpg) no-repeat right 0;float:left; padding:4px 4px 0 3px;} .nav li{float:left;padding-left:1px;} /* 要使a标签支持高度，所以需要加浮动 */ .nav a{background:url(bgL.png) no-repeat;float:left;} .nav span{background:url(bgR.png) no-repeat right 0;float:left; font-size:14px;height:31px; line-height:30px;color:#FFF; /* 开发中一般不会为每一个菜单按钮单独设置宽度，而是用内边距padding撑开宽度 */ padding:0 18px;} /* 群组鼠标移动hover效果 和 当前页效果*/ .nav a:hover,.nav .active{background:url(hoverL.jpg) no-repeat;} .nav a:hover span,.nav .active span{background:url(hoverR.jpg) no-repeat right 0;} </style> </head> <body> <div class="nav"> <!-- 底层：中间1px平铺 和 左边圆弧 --> <!-- <div class="navL"> --> <!-- 次层：左边圆弧 --> <ul class="navR"> <!-- 上层：右边圆弧 --> <!-- 内容开始 --> <li> <!-- 使用a标签是因为a标签的hover是全兼容的 --> <a href="#"> <!-- 底层：左边大半部分 --> <span>MiaoV</span> <!-- 上层：右边圆弧 --> </a> </li> <li> <a href="#" class="active"> <!-- 设置为当前页 --> <span>课程</span> </a> </li> <li> <a href="#"> <span>关于我们</span> </a> </li> <li> <a href="#"> <span>加入我们</span> </a> </li> <!-- 内容结束 --> </ul> <!-- </div> --> </div> </body> </html> |
第四步：效果
第五步：总结PS处理得到的素材
1. bgL.jpg （新PS技巧：Ctrl+T >单击鼠标右键 >选择水平翻转 >bgL.jpg可变bgR.jpg）
2. bgR.jpg
3. bgL.png
4. bgR.png
5. hoverL.jpg
6. hoverR.jpg
总结
1. 实战案例重现：新建一个空的html文档，将“第三步”中的代码全部复制到此html文件中，再将“第五步”中的素材全部另存到此html文件同级目录下，最后用浏览器打开此html文件即可。
实战二（宽高可扩展的圆角背景）
题目
1. 实现下图圆角内容栏
答
第一步：分析
第二步：完成 结构
|
<!DOCTYPE html> <html> <head> <meta charset="utf-8"/> <title>滑动门实战</title> <style> </style> </head> <body> <div class="box">
<div class="boxHead"> <div class="boxHeadL"> <div class="boxHeadR"></div> </div> </div>
<div class="boxC"> 页面内容<br/> 页面内容<br/> 页面内容<br/> 页面内容<br/> 页面内容<br/> </div>
<div class="boxFoot"> <div class="boxFootL"> <div class="boxFootR"></div> </div> </div> </div> </body> </html> |
第三步：完成代码
|
<html> <head> <meta charset="utf-8"/> <title>滑动门实战</title> <style> .box{width:200px;margin:30px auto;} .boxHead{background:url(boxHead.jpg) repeat-x;} .boxHeadL{background:url(boxHeadL.jpg) no-repeat;} .boxHeadR{background:url(boxHeadR.jpg) no-repeat right 0; height:9px;overflow:hidden;}/* "overflow:hidden;"兼容IE6最小19px高度 */ .boxFoot{background:url(boxFoot.jpg) repeat-x;} .boxFootL{background:url(boxFootL.jpg) no-repeat;} .boxFootR{background:url(boxFootR.jpg) no-repeat right 0; height:9px;overflow:hidden;}/* "overflow:hidden;"兼容IE6最小19px高度 */ .boxC{border-left:1px solid #989898;border-right:1px solid #989898;} </style> </head> <body> <div class="box">
<div class="boxHead"> <div class="boxHeadL"> <div class="boxHeadR"></div> </div> </div>
<div class="boxC"> 页面内容<br/> 页面内容<br/> 页面内容<br/> 页面内容<br/> 页面内容<br/> 页面内容<br/> 页面内容<br/> 页面内容<br/> </div>
<div class="boxFoot"> <div class="boxFootL"> <div class="boxFootR"></div> </div> </div> </div> </body> </html> |
第四步：效果
第五步：总结PS处理得到的素材
1. boxHead.jpg
2. boxHeadL.jpg
3. boxHeadR.jpg
4. boxFoot.jpg
5. boxFootL.jpg
6. boxFootR.jpg
总结
1. 实战案例重现：新建一个空的html文档，将“第三步”中的代码全部复制到此html文件中，再将“第五步”中的素材全部另存到此html文件同级目录下，最后用浏览器打开此html文件即可。
实战三（背景透明的圆角）
题目
1. 题目的产生
a) 产生条件：我们为“实战二”的案例代码添加一个页面背景，添加的代码如下：
i. body{background:#000;}
b) 产生效果：代码添加后浏览器打开得到效果如下：
c) 小结
i. 当把白色背景换成了其他颜色后，可以看到在圆角处出现了问题。
答
方式一
第一步：分析
1. 将圆角边缘用PS处理成透明的
2. 将两个圆角分别放在底层块两头最外边。
第二步：编码
1. 代码
|
<!DOCTYPE html> <html> <head> <meta charset="utf-8"/> <title>滑动门实战</title> <style> body{background:red;} /* "btn.gif"、 "btnL.gif"、btnR.gif" 都是透明的图片 */ .btn{background:url(btn.gif) repeat-x;width:200px;margin:30px auto;} .btnL{background:url(btnL.gif) no-repeat;} .btnR{background:url(btnR.gif) no-repeat right 0;height:31px} </style> </head> <body> <div class="btn"> <div class="btnL"> <div class="btnR"></div> </div> </div> </body> </html> |
2. 效果
第三步：将两个圆弧层用相对定位放到最两边
1. 代码
|
<!DOCTYPE html> <html> <head> <meta charset="utf-8"/> <title>滑动门实战</title> <style> body{background:red;} /* "btn.gif"、 "btnL.gif"、btnR.gif" 都是透明的图片 */ .btn{background:url(btn.gif) repeat-x;width:200px; margin:30px auto;} .btnL{background:url(btnL.gif) no-repeat; position:relative;left:-9px;}/* 相对定位 */ .btnR{background:url(btnR.gif) no-repeat right 0; height:25px; position:relative;left:18px;}/* 相对定位 */ </style> </head> <body> <div class="btn"> <div class="btnL"> <div class="btnR"></div> </div> </div> </body> </html> |
第四步：效果
方式二（推荐）
第一步：分析
1. 将圆角边缘用PS处理成透明的。
2. 将滑动门三层的摆放顺序翻转过来，将原“底层”div放到最上层，然后给“底层”div指定左右外边距。
第二步：完成代码
|
<!DOCTYPE html> <html> <head> <meta charset="utf-8"/> <title>滑动门实战</title> <style> body{background:red;} .btnL{background:url(btnL.gif) no-repeat;width:200px;} .btnR{background:url(btnR.gif) no-repeat right 0;} .btn{background:url(btn.gif) repeat-x;height:25px; margin:0 9px;}/* 温习：父子级包含的时候，子级的margin-top会传递给父级 */ </style> </head> <body> <div class="btnL"> <div class="btnR"> <div class="btn"></div> </div> </div> </body> </html> |
第三步：效果
PS素材
1. btn.gif
2. btnL.gif
3. btnR.gif
总结
1. 实际开发中推荐“方式二”。
2. 实战案例重现：新建一个空的html文件，将代码复制到此html文件中，再将“PS素材”里所有图片另存到此html文件的同级目录下，最后用浏览器打开即可。
实战四（CSS3自带圆角）[不需要用到滑动门]
代码
|
<!DOCTYPE html> <html> <head> <meta charset="utf-8"/> <title>CSS3自带圆角</title> <style> .box{width:200px;height:200px;border:1px solid #e5e5e5;margin:30px auto; border-radius:40px;} </style> </head> <body> <div class="box"></div> </body>
</html> |
效果
总结
1. 虽然CSS3自带的圆角使用很方便，但各大浏览器兼容性不好（如：IE8以下浏览器都不支持）。
CSS Sprites (CSS精灵)
简介
1. CSSSprites在国内很多人叫css精灵，是一种网页图片应用处理方式。它允许你将一个页面涉及到的所有零星图片都包含到一张大图中去，这样一来，当访问该页面时，载入的图片就不会像以前那样一幅一幅地慢慢显示出来了。对于当前网络流行的速度而言，不高于200KB的单张图片的所需载入时间基本是差不多的。
2. 加速的关键，不是降低质量，而是减少个数。传统切图讲究精细，图片规格越小越好，重量越小越好，其实规格大小无所谓，计算机统一都按byte计算。客户端每显示一张图片都会向服务器发送请求。所以，图片越多请求次数越多，造成延迟的可能性也就越大。
原理
1. CSS Sprites其实就是把网页中一些背景图片整合到一张图片文件中，再利用CSS的“background-image”，“background- repeat”，“background-position”的组合进行背景定位，background-position可以用数字精确的定位出背景图片的位置。
优缺点
优点
1. 利用CSS Sprites能很好地减少网页的http请求，从而大大的提高页面的性能，这也是CSS Sprites最大的优点，也是其被广泛传播和应用的主要原因；
2. CSS Sprites能减少图片的字节，曾经比较过多次3张图片合并成1张图片的字节总是小于这3张图片的字节总和。
3. 解决了网页设计师在图片命名上的困扰，只需对一张集合的图片上命名就可以了，不需要对每一个小元素进行命名，从而提高了网页的制作效率。
4. 更换风格方便，只需要在一张或少张图片上修改图片的颜色或样式，整个网页的风格就可以改变。维护起来更加方便。
缺点
1. 在图片合并的时候，你要把多张图片有序的合理的合并成一张图片，还要留好足够的空间，防止板块内出现不必要的背景；这些还好，最痛苦的是在宽屏，高分辨率的屏幕下的自适应页面，你的图片如果不够宽，很容易出现背景断裂；
2. CSS Sprites在开发的时候比较麻烦，你要通过photoshop或其他工具测量计算每一个背景单元的精确位置，这是针线活，没什么难度，但是很繁琐；幸好腾讯的鬼哥用ADOBE AIR开发了一个CSS Sprites 样式生成工具，虽然还有一些使用上的不灵活，但是已经比photoshop测量来的方便多了，而且样式直接生成，复制，拷贝就OK！
3. CSS Sprites在维护的时候比较麻烦，如果页面背景有少许改动，一般就要改这张合并的图片，无需改的地方最好不要动，这样避免改动更多的css，如果在原来的地方放不下，又只能（最好）往下加图片，这样图片的字节就增加了，还要改动css。
4. CSS Sprites非常值得学习和应用，特别是页面有一堆icon（图标）。总之很多时候大家要权衡一下利弊，再决定是不是应用CSS Sprites。
用法
|
.bg_sprite{background-image:url(/整图地址); background-repeat:no-repeat} 引用该类 .. 然后在元素中逐一定义背景坐标 .. 以下为关键属性 .. #ico1 {width:容器宽度;height:容器高度;background-position:X坐标 Y坐标} #ico2 {width:容器宽度;height:容器高度;background-position:X坐标 Y坐标} #ico3 {width:容器宽度;height:容器高度;background-position:X坐标 Y坐标} .nav {width:容器宽度;height:容器高度;background-position:X坐标 Y坐标} 必须要限定容器大小符合背景图元素位置 .. 另外 .. XY轴是相对于整张图片的左上角来算的 .. 所以取值一定要算清楚。 |
范例
范例一（入门）
第一步：为每一个div设置同一个背景图片
|
<!DOCTYPE html> <html> <head> <meta charset="utf-8"/> <title>CSS精灵</title> <style> /* 1.统一设置背景图片 */ div{width:80px;height:80px;background:url(bigptr.jpg) no-repeat; border:10px solid black;margin:10px;float:left;display:inline;} /* 添加 "display:inline" 是为了清掉IE6下的双边距bug */ /* 温习 : 双边距bug产生条件 1. 块元素 2. 浮动 3. 横向的外边距margin 4. IE6下 解决办法 : 将块变为内嵌 */ </style> </head> <body> <div class="box1"></div> <div class="box2"></div> <div class="box3"></div> </body>
</html> |
第二步：运行效果
第三步：使用CSS 精灵
|
<!DOCTYPE html> <html> <head> <meta charset="utf-8"/> <title>CSS精灵</title> <style> /* 1.统一设置背景图片 */ div{width:80px;height:80px;background:url(bigptr.jpg) no-repeat; border:10px solid black;margin:10px;float:left;display:inline;} /* 添加 "display:inline" 是为了清掉IE6下的双边距bug */ /* 温习 : 双边距bug产生条件 1. 块元素 2. 浮动 3. 横向的外边距margin 4. IE6下 解决办法 : 将块变为内嵌 */ /* 2.为元素逐一定义背景坐标 */ .box1{background-position:-145px -65px;} .box2{background-position:-98px -162px;} .box3{background-position:-235px -116px;} </style> </head> <body> <div class="box1"></div> <div class="box2"></div> <div class="box3"></div> </body>
</html> |
第四步：再运行效果
素材
1. bigptr.jpg
总结
1. 范例重现：新建一个空的html文件，将上面的代码复制到此html文件中，再将图片右键另存到此html文件的同级目录下，最后浏览器打开运行即可。
范例二（实战）
题目
1. 将上面“滑动门与圆角”中的“实战二”用CSS精灵进行优化。
答
第一步：PS合并图标
1. boxAll.jpg
第二步：完成代码优化
|
<!DOCTYPE html> <html> <head> <meta charset="utf-8"/> <title>CSS精灵</title> <style> .box{width:200px;margin:30px auto;} .boxHead,.boxHeadL,.boxHeadR,.boxFoot,.boxFootL,.boxFootR{ background:url(boxAll.jpg) no-repeat;} .boxHead,.boxFoot{background-repeat:repeat-x;} /* ".boxHead"坐标不需要指定，因为默认值为： 0 0 或left top , 刚好是需要的位置 */ .boxHeadL{background-position:0 -9px;} .boxHeadR{background-position:right -18px; height:9px;overflow:hidden;} /* "overflow:hidden;"兼容IE6最小19px高度 */ .boxFoot{background-position:0 -27px;} .boxFootL{background-position:0 -36px;} .boxFootR{background-position:right -45px; /* "right"表示背景图的右侧与元素的右侧对齐 */ height:9px;overflow:hidden;} /* "overflow:hidden;"兼容IE6最小19px高度 */ .boxC{border-left:1px solid #989898;border-right:1px solid #989898;} </style> </head> <body> <div class="box">
<div class="boxHead"> <div class="boxHeadL"> <div class="boxHeadR"></div> </div> </div>
<div class="boxC"> 页面内容<br/> 页面内容<br/> 页面内容<br/> 页面内容<br/> 页面内容<br/> 页面内容<br/> 页面内容<br/> 页面内容<br/> </div>
<div class="boxFoot"> <div class="boxFootL"> <div class="boxFootR"></div> </div> </div> </div> </body> </html> |
第三步：效果
总结
1. 没什么好说的，这里就加强一下“background-position”的关键字取值的理解：
a) “background-position：left top”
i. 背景图的左侧跟元素的左侧对齐，背景图的顶部跟元素的顶部对齐。
b) “background-position：cneter center”
i. 背景图中间与元素中间对齐。
c) “background-position：right top”
i. 背景图右上角与元素右上角对齐。