雪碧+滑动门，自适应宽度菜单
近一个周来学习CSS+DIV（web标准），做了不少例子，感觉对HTML有了新的认识，本人觉得css Sprites技术很重要，优点，减少文件体积，减少客户端对服务器的访问次数，提高效率。本文出自：十天学会DIV+CSS(WEB标准)
效果图：
代码：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<style type="text/css">
*{margin:0px;padding:0px;border:none;}
#content{margin:60px auto;}
#content ul{list-style:none;}
#content ul li{float:left;margin-left:5px;height:34px;text-align:center;line-height:34px;background-image:url("/Images/btn_bg.gif");background-repeat:no-repeat;background-position:left 0px;padding-left:10px;}
#content ul li a{text-decoration:none; display:block;background-image:url("/Images/btn_bg.gif");background-repeat:no-repeat;background-position:right 0px;padding-right:10px;}
#content ul li:hover{background-image:url("/Images/btn_bg.gif");background-repeat:no-repeat;background-position:left -37px;}
#content ul li:hover a{background-image:url("/Images/btn_bg.gif");background-repeat:no-repeat;background-position:right -37px;}
</style>
</head>
<body>
<div id="content">
<ul>
<li><a href="#">首页</a></li>
<li><a href="#">免费注册</a></li>
<li><a href="#">登录</a></li>
</ul>
</div>
</body>
</html>
注：有兴趣，可以访问：标准之路(http://www.aa25.cn)
浙公网安备 33010602011771号