閱讀(96.7k) 書簽贊(7) 我要糾錯(cuò)

詳細(xì)的css導(dǎo)航條實(shí)現(xiàn)代碼及素材下載

2020-12-01 15:29 更新

導(dǎo)航條是一個(gè)網(wǎng)站的基礎(chǔ)，美觀易用的導(dǎo)航條對(duì)于任何網(wǎng)站都是非常重要的。按照傳統(tǒng)的方法，導(dǎo)航條是由放在一行表格單元里的圖形圖像構(gòu)成。由于人們不再推薦用表格來定位任何非表格的頁面內(nèi)容，所以很多人都用結(jié)構(gòu)化的 XHTML 標(biāo)記和 CSS 格式來創(chuàng)建導(dǎo)航條。下面先來看一下最簡單的 CSS 導(dǎo)航條是怎么實(shí)現(xiàn)的：

首先,我們來給這個(gè)下拉菜單寫一個(gè) HTML 的代碼.先創(chuàng)建一個(gè) div 來做為容器,然后把這個(gè)導(dǎo)航菜單放到這個(gè)容器里.正如下面的代碼,我們用無序列表來創(chuàng)建這個(gè)導(dǎo)航菜單.在這個(gè)導(dǎo)航菜單中 Portfolio 項(xiàng)下有一個(gè)子菜單,用粗體表示出來,別忘了關(guān)閉</li>。

<ul>

<li><a href="#">About Me</a></li>

<li><a href="#">Portfolio</a>

<ul>

<li><a href="#">Print</a></li>

<li><a href="#">Photos</a></li>

</ul>

</li>

<li><a href="#">Contact Me</a></li>

</ul>

</div>

The CSS

首先,我們來給#nav div設(shè)置一個(gè)樣式,給它一個(gè)寬度,高度,字體大小.并把默認(rèn)的無序列表樣式給去掉.。

*{ margin:0px; padding: 0px; }

#nav {

font-family: arial, sans-serif;

position: relative;

width: 390px;

height:56px;

font-size:14px;

color:#999;

margin: 0 auto;

}

#nav ul {

list-style-type: none;

}

在這一步我們給<li>設(shè)置左浮動(dòng)讓整個(gè)導(dǎo)航水平.并且設(shè)置相對(duì),記<li>成為一個(gè)祖元素,這樣我們下面就可以利用到絕對(duì)定位了。

#nav ul li {

float: left

position: relative;

}

在這一步我們給<a>標(biāo)簽設(shè)置一個(gè)樣式被它看起來像一個(gè)按扭(div css教程-如何使用css創(chuàng)建一個(gè)類似按扭的導(dǎo)航)

#nav ul li a {

text-align: center;

border-right:1px solid #e9e9e9;

padding:20px;

display:block;

text-decoration:none;

color:#999;

}

最重要的部分
這部分將展示給你看如何讓下拉菜單的顯示和隱藏。當(dāng)光標(biāo)沒有移動(dòng)到Portfolio里下拉菜單不顯示,當(dāng)光標(biāo)移動(dòng)到Portfolio上面時(shí)下拉菜單顯示,我們用display的屬性來實(shí)現(xiàn)這個(gè)效果。

#nav ul li ul {

display: none

}

#nav ul li:hover ul {

display: block;

position: absolute;

}

我們給下拉菜單的懸停狀態(tài)設(shè)置樣式

#nav ul li:hover ul li a {

display:block;

background:#12aeef;

color:#ffffff;