我們在網(wǎng)上瀏覽的好多網(wǎng)頁都有導(dǎo)航欄,它提供信息導(dǎo)航的功能,想知道它是怎么做出來的嗎?
首先要知道的:HTML中的列表標(biāo)簽都有那些呢?
- ul-li無序列表 ( 網(wǎng)頁中顯示的默認(rèn)樣式一般為：每項 li 前都自帶一個圓點 )
語法:
<ul>
<li>文本</li>
<li>文本</li>
</ul>
2.ol-li有序列表(在網(wǎng)頁中顯示的默認(rèn)樣式一般為：每項 li 前都自帶一個序號，序號默認(rèn)從1開始)
<ol>
<li>文本1</li>
<li>文本2</li>
</ol>
其實導(dǎo)航欄就是給列表標(biāo)簽設(shè)置CSS樣式
制作導(dǎo)航欄開始啦:
第一步:
在HTML上的文件里加上ul-li 標(biāo)簽,在對應(yīng)的CSS文件中使用下邊語句去掉 li 標(biāo)簽前面默認(rèn)的小圓點
ul{
list-style: none;
}
第二步:
讓 li 標(biāo)簽浮動起來,一般設(shè)置為左浮動,看看它是不是變成了一橫排
li {
float: left;
}
第三步:
美化一下你的導(dǎo)航欄,給它加個背景色吧 background-color: red;
每個導(dǎo)航單元的字?jǐn)?shù)不同,大小不同給它設(shè)置寬高看起來更美觀 height: 30px; width: 100px;
字體顏色也可以設(shè)置哦 color: #000f;
留個分界線導(dǎo)航欄不會連成一片了margin-left: 1px;
靜態(tài)的大概是介個樣子
加個圓弧會不會更好看呢? border-radius: 15px 15px 0 0;
第四步:
加上一個鼠標(biāo)事件,鼠標(biāo)移動到導(dǎo)航單元改變背景色和文本顏色
li a:hover { //a標(biāo)簽是給li文本加了鏈接 下面介紹
background-color: #e151ff;
color: #efefef;
}
第五步:
使用a標(biāo)簽給你的導(dǎo)航加上鏈接
<li><a href="#">首 頁</a></li> //#表示空鏈接網(wǎng)址,你可以加上想要的鏈接
一般加上鏈接后文本會默認(rèn)加一個下劃線,使用語句 text-decoration: none; 去除下劃線
補(bǔ)充鼠標(biāo)事件
未被訪問的鏈接
a:link { color: #000; }
鼠標(biāo)指針移動到鏈接上
a:hover { /* 鼠標(biāo)指針移動到鏈接上 */
color: white;
height: 30px;
background: #f00;
}
正在被點擊的鏈接
a:active { color: #000; }
已被訪問的鏈接
a:visited { color: #a369af; }
不同的屬性會呈現(xiàn)不同的效果哦, 趕快試試吧 !
