W3Cschool
恭喜您成為首批注冊用戶
獲得88經驗值獎勵
詳細的css導航條實現代碼及素材下載
導航條是一個網站的基礎，美觀易用的導航條對于任何網站都是非常重要的。按照傳統(tǒng)的方法，導航條是由放在一行表格單元里的圖形圖像構成。由于人們不再推薦用表格來定位任何非表格的頁面內容，所以很多人都用結構化的 XHTML 標記和 CSS 格式來創(chuàng)建導航條。下面先來看一下最簡單的 CSS 導航條是怎么實現的：
首先,我們來給這個下拉菜單寫一個 HTML 的代碼.先創(chuàng)建一個 div 來做為容器,然后把這個導航菜單放到這個容器里.正如下面的代碼,我們用無序列表來創(chuàng)建這個導航菜單.在這個導航菜單中 Portfolio 項下有一個子菜單,用粗體表示出來,別忘了關閉</li>。
<div id="nav">
<ul>
<li class="first"><a href="#">Home</a></li>
<li><a href="#">About Me</a></li>
<li><a href="#">Portfolio</a>
<ul>
<li><a href="#">Web</a></li>
<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設置一個樣式,給它一個寬度,高度,字體大小.并把默認的無序列表樣式給去掉.。
*{ 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;
}
#nav ul li {
float: left
position: relative;
}
#nav ul li a {
text-align: center;
border-right:1px solid #e9e9e9;
padding:20px;
display:block;
text-decoration:none;
color:#999;
}
這部分將展示給你看如何讓下拉菜單的顯示和隱藏。當光標沒有移動到Portfolio里下拉菜單不顯示,當光標移動到Portfolio上面時下拉菜單顯示,我們用display的屬性來實現這個效果。
#nav ul li ul {
display: none
}
#nav ul li:hover ul {
display: block;
position: absolute;
}
#nav ul li:hover ul li a {
display:block;
background:#12aeef;
color:#ffffff;
width: 110px;
text-align: center;
border-bottom: 1px solid #f2f2f2;
border-right: none;
}
#nav ul li:hover ul li a:hover {
background:#6dc7ec;
color:#fff;
}
實例
#nav ul li:hover ul {
display: block;
position: absolute; }
#nav ul li:hover ul li a {
display:block;
background:#12aeef;
color:#ffffff;
width: 110px;
text-align: center;
border-bottom: 1px solid #f2f2f2;
border-right: none; }
#nav ul li:hover ul li a:hover {
background:#6dc7ec;
color:#fff; }
嘗試一下 ?
查看在線運行效果
css導航條素材下載
純CSS實現的彩色導航菜單
左側導航布局CSS網頁模板
CSS中英文雙語導航菜單
CSS水平下拉菜單
div css下拉導航菜單分類代碼
五款漂亮的CSS橫向下拉菜單導航條
- 內容錯誤
- 更新不及時
- 鏈接錯誤
- 缺少代碼/圖片示列
- 太簡單/步驟待完善
- 其他
推薦文章
Copyright©2021 w3cschool編程獅|閩ICP備15016281號-3|閩公網安備35020302033924號
違法和不良信息舉報電話：173-0602-2364|舉報郵箱：jubao@eeedong.com
更多建議：