欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

純CSS實現標簽導航制作

 更新時間：2008年01月10日 16:39:53   作者：  
純CSS實現標簽導航制作
在網上搜索了一下都沒怎么看到純用CSS制作標簽導航方面的教程或者說明，大部分都是要涉及到JS的編寫的。這對于很多CSS學習中的人來說實在有些不夠體貼，既然沒人做那我來先來試試！我在這里做的CSS標簽導航是純CSS無JS無背景圖片的綠色導航。此文章適合初學者，高手可以路過，呵呵！

[Ctrl+A 全選 注:引入外部Js需再刷新一下頁面才能執(zhí)行]

復制代碼 代碼如下:

.mainNav{  
 margin:0 20px;  
 height:47px;  
 border-bottom:2px solid #000;  
}  
ul{  
 margin:20px;  
 margin-bottom:0;  
 padding-left:20px;  
 list-style-type:none;  
 font-size:12px;  
 position:absolute;  
}  
ul li{  
 float:left;  
 margin-right:5px;  
}  
ul li a{  
 display:block;  
 width:100px;  
 line-height:25px;  
 text-align:center;  
 color:#999;  
 background-color:#FC0;  
 border:2px solid #000;  
}  
ul li a:hover{  
 height:27px;  
 background-color:#F60;  
 border-bottom:none;  
}  
#nav01 ul li a#nav001,  
#nav02 ul li a#nav002,  
#nav03 ul li a#nav003{  
 width:100px;  
 height:27px;  
 color:#FFF;  
 background-color:#F60;  
 border:2px solid #000;  
 border-bottom:none;  
}  
.con{  
 margin:0 20px;  
 padding:20px;  
 color:#FFF;  
 background-color:#F60;  
 border:2px solid #000;  
 border-top:none;  
} 

復制代碼 代碼如下:

<div class="mainNav">  
    <div class="mainNav">  
        <ul>  
            <li><a href="#" id="nav001">阿里滿滿01</a></li>  
            <li><a href="#" id="nav002">阿里滿滿02</a></li>  
            <li><a href="#" id="nav003">阿里滿滿03</a></li>  
        </ul>  
    </div> 


其實這其中的關鍵點是ul中的position:absolute命令，由于使用了這個CSS屬性，ul導航的內容變成了層顯示，就相當于浮在了瀏覽器上面。而為了不讓下面的內容填補ul部分的內容，在ul外還套了個div，起到了幫助ul占位的作用。而這個div也同時起到了充當ul背景的作用，標簽導航的關鍵就是底部border了。全看完之后你會發(fā)現其實很簡單，但關鍵還是要有構思。好了！繼續(xù)學習吧！

相關文章

最新評論