建站
咨詢
售后
建站咨詢
新聞中心
導(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)航條。下面先來看一下最簡(jiǎn)單的 CSS 導(dǎo)航條是怎么實(shí)現(xiàn)的：
堯都網(wǎng)站建設(shè)公司成都創(chuàng)新互聯(lián)公司,堯都網(wǎng)站設(shè)計(jì)制作，有大型網(wǎng)站制作公司豐富經(jīng)驗(yàn)。已為堯都1000多家提供企業(yè)網(wǎng)站建設(shè)服務(wù)。企業(yè)網(wǎng)站搭建\成都外貿(mào)網(wǎng)站建設(shè)公司要多少錢，請(qǐng)找那個(gè)售后服務(wù)好的堯都做網(wǎng)站的公司定做！
首先,我們來給這個(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)閉。
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;
}
在這一步我們給
#nav ul li {
float: left
position: relative;
}
在這一步我們給標(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;
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
實(shí)例
#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; }
嘗試一下 ?
查看在線運(yùn)行效果
css導(dǎo)航條素材下載
4色橫向CSS導(dǎo)航條菜單 點(diǎn)此下載
純CSS實(shí)現(xiàn)的彩色導(dǎo)航菜單
點(diǎn)此下載
左側(cè)導(dǎo)航布局CSS網(wǎng)頁模板
點(diǎn)此下載
CSS中英文雙語導(dǎo)航菜單
點(diǎn)此下載
CSS水平下拉菜單
點(diǎn)此下載
div css下拉導(dǎo)航菜單分類代碼
點(diǎn)此下載
五款漂亮的CSS橫向下拉菜單導(dǎo)航條
點(diǎn)此下載
本文標(biāo)題：創(chuàng)新互聯(lián)CSS教程：詳細(xì)的css導(dǎo)航條實(shí)現(xiàn)代碼及素材下載
網(wǎng)站路徑：http://www.dlmjj.cn/article/dhgijep.html
