導航下拉麵板能讓導航裝載更多的內容,新增更多的關鍵詞,有利於優化,也使網站顯得更加高階大氣,如果您需要,我就來提供!
工具/原料
Dreamwere,新手推薦
懂得html程式碼原理,能看懂css定位
方法/步驟
首先我們來看看下拉麵板的效果吧,這個事稍微複雜一點的下拉麵板,我們會一步步為您講解,如何製作出這樣一個下拉麵板,但前提是你需要了解CSS的定位知識和HTML程式碼,因此沒有這些基礎的同學要先學一下HTML程式碼和CSS(層疊樣式表)的知識。
下面我們先來製作一個簡單的導航:
css程式碼片段
*{ margin:0; padding:0; border:0;background-repeat:no-repeat;font-size:14px;list-style-type:none;color:#F5F5F5;}
a:link {text-decoration:none;}
a:visited {text-decoration:none;}
a:hover {text-decoration:none;}
a:active {text-decoration:none;}
.navgation{width:100%; height:36px; line-height:36px; background:#000; margin:10px auto;}
.nav{width:960px; height:36px; margin:0 auto;}
.nav li{float:left; width:130px; border-right:#FFF solid 2px; text-align:center;}
.nav .last{border-right:none;}
html程式碼片段