(018)layout_横向菜单 

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html>
  <head>
    <title>navi_v.html</title>
    
    <meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
    <meta http-equiv="description" content="this is my page">
    <meta http-equiv="content-type" content="text/html; charset=UTF-8">
    
    <link rel="stylesheet" type="text/css" href="../common/reset.css">
    <style type="text/css">
        body {font-family:verdana; font-size:12px; line-height:1.5em;}
        a {color:#000; text-decoration:none;}
        a:hover {color:#f00;}
        #menu {width:500px; height:28px; margin:0 auto; border-bottom:3px solid #e10001;}
        #menu ul {list-style-type:none; }
        #menu ul li {float:left; margin-left: 2px;}
        #menu ul li a {display:block; width:87px; height:28px; line-height:28px; text-align:center; background:url(../image/sprites.gif) 0 -28px no-repeat;float:left; font-size:12px;}
        #menu ul li a:hover {background:url(../image/sprites.gif) 0 0 no-repeat; color:#fff;}
        
    </style>
  </head>
  
  <body>
        <div id="menu">
            <ul>
                <li><a id="current" href="#">首页</a></li>
                <li><a href="#">网页版式布局</a></li>
                <li><a href="#">div+css教程</a></li>
                <li><a href="#">div+css实例</a></li>
                <li><a href="#">常用代码</a></li>
            </ul>
        </div>
  </body>
</html>

 

posted @ 2015-02-02 14:12  雪中飞雁  阅读(116)  评论(0)    收藏  举报