当网页中存在多个小图片 比如logo ,菜单图片, 导航图片等,如果每次都是从服务请求,或者图片链接在另一个地址那么不进页面的加载速度会很慢,而且也会很消耗流量,
那么就需要下面的技术了:
一.图片整合
图片整合技术(CSSSprites):将导航背景图片,图片按钮背景图片等有规则的合并为一张背景图,即多张图片合为一整张图,然后用background-position来实现背景图的定位技术。
优势:通过中等和图片,减少对服务器的请求数量,从而加快页面的加载速度。9张图片——9次——36K,一张——1次——4k。
二.滑动门技术
1.滑动门技术特征
可以使CSS设计出来的导航菜单兼具传统布局的图像效果与CSS布局的高效扩展性。
2.什么是滑动门
滑动门是一个形象的称呼,它利用CSS背景图像可层叠性,并允许彼此之上进行滑动来创造一些特殊的动态效果。
图片:
效果图:
代码例子:
<html>
<head>
<meta charset="utf-8">
<title>滑动</title>
<style type="text/css">
*{margin:0;padding:0;}
ul,ol,dl{list-style:none;}
a{text-decoration:none;}
.nav{width:680px;height:42px;margin:50px auto;}
.nav li{float:left;margin-right:10px;}
.nav li a{display:block;height:42px;background:url(img1.jpg) no-repeat right top;}
.nav li a span{display:block;height:42px;padding:0 10px;line-height:42px;background:url(img2.jpg) no-repeat;color:#fff;}
.nav li a:hover{background-position:right -42px;}
.nav li a:hover span{background-position:left -42px;}
</style>
</head>
<body>
<ul class="nav">
<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>
</body>
</html>