純CSS實現標籤導航製作_經驗交流

在網路上搜尋了一下都沒怎麼看到純用CSS製作標籤導航方面的教學或說明，大部分都是要涉及到JS的編寫的。這對許多CSS學習中的人來說實在有些不夠體貼，既然沒人做那我來先試試！我在這裡做的CSS標籤導航是純CSS無JS無背景圖片的綠色導航。此文章適合初學者，高手可以路過，呵呵！

<meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>nav02</title> <style type="text/css"> *{ margin:0; padding:0; } .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; } </style> <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> <div class="con">腳本之家 <a href="</div">www.jb51.net</a> </div>>
[​​Ctrl A 全選注:如需引入外部Js需刷新才能執行]

複製程式碼 程式碼如下:

.mainNav{  
 margin:0 20px;
 高度：47px；
 border-bottom:2px solid #000;
}  
ul{  
 邊距：20px；
 邊距底部：0；
 左內邊距：20px；
 列表樣式類型：無；
 字體大小：12px；
 位置：絕對；
}  
ul li{  
 float:left;
 右邊距：5px；
}  
ul li a{  
 顯示：區塊；
 寬度：100px；
 行高：25px；
 文字對齊：置中；
 顏色：#999；
 背景顏色：#FC0;
邊框：2px實心#000；
}  
ul li a:hover{  
 高度：27px;
 背景顏色：#F60;
 邊框底部：無；
}  
#nav01 ul li a#nav001，  
#nav02 ul li a#nav002，  
#nav03 ul li a#nav003{  
#nav03 ul li a#nav003{  
#nav03 ul li a#nav003{  
#nav03 ul li a#nav003{  
 
 高度：27px；
 顏色：#FFF；
 背景顏色：#F60;
邊框：2px實心#000；
 邊框底部：無；
}  
.con{  
 邊距：0 20px；
 內邊距：20px；
 顏色：#FFF；
 背景顏色：#F60;
邊框：2px實心#000；
 邊框上方：無；
} 

複製程式碼程式碼如下：

  
    

  
        

  
   a>  
            
• 阿里滿02
  
阿里滿03  
        

  
    

 

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