雪碧+滑动门,自适应宽度菜单

 

   近一个周来学习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)

posted @ 2012-09-23 20:49  阿朱姐姐  阅读(246)  评论(0编辑  收藏  举报

友情链接:@开源中国

回到顶部