導航頁面樣式

時間 2019-11-17

標籤導航頁面樣式简体版

原文原文鏈接

用一下的代碼爲例：this

<body>

<ul class="nav">
    <li><a class="on" href="#">首　　頁</a></li>
    <li><a href="#">新聞快訊</a></li>
    <li><a href="#">產品展現</a></li>
    <li><a href="#">售後服務</a></li>
    <li><a href="#">聯繫咱們</a></li>
  </ul>

</body>

1.水平菜單的製做：spa

*{margin:0; padding:0; font-size:14px;}
ul{ list-style:none;}
a{color:#333;text-decoration:none}
.nav li{ float:left;}
.nav li a{ display:block; text-indent:20px; height:30px; line-height:30px; width:100px; background-color:#efefef; margin-bottom:1px;}
.nav li a:hover{ background-color:#F60; color:#fff}

2.圓角菜單的製做：code

  *{margin:0; padding:0; font-size:14px;}
        a{color:#333;text-decoration:none}
        .nav{list-style:none; height:30px; border-bottom:10px solid #F60; margin-top:20px; padding-left:50px;}
        .nav li{float:left}
        .nav li a{display:block; height:30px;text-align:center; line-height:30px; width:120px; border-radius:12px 12px 0 0; margin-left:1px;background-color:#ddd;}
        .nav li a.on, .nav li a:hover{background-color:#F60; color:#fff;}

3.高度改變的伸縮導航：blog

*{margin:0; padding:0; font-size:14px;}
a{color:#333;text-decoration:none}
ul{list-style:none; height:50px; border-bottom:5px solid #F60; padding-left:30px;}
ul li{float:left; margin-top:20px;}
a{display:block;height:30px;text-align:center; line-height:30px; width:120px; background-color:#ccc;}
a.on, a:hover{ color:#fff;background-color:#F60;height:40px; line-height:40px;margin-top:-10px;}

4.水平伸縮導航：seo

* { margin: 0; padding: 0; font-size: 14px; }
a { color: #333; text-decoration: none }
ul { list-style: none; height: 30px; border-bottom: 5px solid #F60; margin-top: 20px; padding-left: 50px; }
ul li { float: left }
ul li a { display: block; height: 30px; text-align: center; line-height: 30px; width:120px; background: #efefef; margin-left: 1px; }
a.on, a:hover { background: #F60; color: #fff; }

<script>
window.onload=function(){
    var aA=document.getElementsByTagName('a');
    for(var i=0; i<aA.length; i++){
        aA[i].onmouseover=function(){
            var This=this;
            clearInterval (This.time);
            This.time= setInterval (function(){
                    This.style.width=This.offsetWidth+8+"px";
                    if(This.offsetWidth >=160)
                    clearInterval(This.time);
                },30)
        }
        aA[i].onmouseout=function(){
                clearInterval(this.time);
                var This=this;
                this.time=setInterval(function(){
                    This.style.width=This.offsetWidth-8+"px";
                    if(This.offsetWidth<=120){
                        This.style.width='120px';
                        clearInterval(This.time);
                    }
                },30)
        }
    }
}
</script>

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。