图片整合+宽高自适应+盒模型
1.图片整合技术(CSS Sprites)
1.1 什么是图片整合
将导航背景图片、按钮背景图片等有规则的合并成一张背景图(精灵图、雪碧图),即将多张图片合为一张整图,然后用background-position”来实现背景图片的定位技术。
1.2 图片整合的优势(提高性能)
一、通过图片整合来减少对服务器的请求次数,从而提高 页面的加载速度。
二、通过整合图片来减小图片的体积。
1.3 图片整合的使用
一、滑动门
描述:滑动门是一个形象的称呼,它利用CSS背景图像可层叠性,并允许彼此之上进行滑动来创造一些特殊动态效果
根据文本字体的长度进行伸缩(注:文字长度不能超过图片的长度,否则出现留白的效果)
优势:
通过滑动门技术,可以使CSS设计出来的导航菜单兼具传统布局的图像效果,与CSS布局的高效扩展性 。