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

 

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

你可能感兴趣的:(自适应)