美文网首页
导航编辑

导航编辑

作者: CdMedici | 来源:发表于2015-11-12 15:05 被阅读0次
模仿导航栏
<head>
    <style>
        ul{list-style-type:none; }/*去掉ul的默认list style*/
        li{float:left; }/*浮动让其在一行显示*/
        a{display:block; }/*把a转换为块级元素。用于设置宽高*/
        .nav {
                background: url(images/nav_bg.gif) ; /* 设置大背景*/
                height: 48px; 
                width: 700px;
                margin: 20px auto;
                }
        .nav_l {
                background: url(images/nav_l_bg.gif); /*设置左边圆角背景*/
                height: 48px;
                width: 9px;
                float: left;
                  }
       .nav_r {
                background: url(images/nav_r_bg.gif); 
                height: 48px;
                width: 9px;
                float: right;
                   }
        .nav ul li {
               background: url(images/nav_li_right.gif) no-repeat right center;
               height: 48px;
               text-align: center;
               padding: 0 10px;
                       }
        .nav ul li a {
               text-decoration: none; /*去掉a默认下划线*/
               color: #fff;
               font-weight: bold; /*设置加粗属性*/ 
               width: 88px;
               height: 37px;
               line-height: 48px; /*设置行高*/
               display: block;
                         }
         .nav ul li a:hover {
              background: url(images/nav_li_hover.gif);
              line-height: 37px;
                                     }
         .nav ul li a.active {
              background: url(images/nav_li_current.gif);
              line-height: 37px;
                                     }
     </style>
</head>

<body>
    <div class="nav">

        <!--lift-->
        <div class="nav_l"></div>

        <!--middle-->
        <ul>
            <li><a href="#" class="active">首页</a></li> 
            <li><a href="#">新闻中心</a></li>
            <li><a href="#">产品动态</a></li>
            <li><a href="#">关于我们</a></li>
            <li><a href="#">联系我们</a></li>

        <!--right-->
    <div class="nav_r"></div>

    </div>
</body>

相关文章

网友评论

      本文标题:导航编辑

      本文链接:https://www.haomeiwen.com/subject/efihhttx.html