導(dǎo)航欄
時(shí)間：2023-07-24 19:21:01 | 來源：網(wǎng)站運(yùn)營
時(shí)間：2023-07-24 19:21:01 來源：網(wǎng)站運(yùn)營
導(dǎo)航欄：在網(wǎng)頁中，導(dǎo)航欄是一個(gè)必不可少的元素。直接進(jìn)入主題。導(dǎo)航欄的制作。
首先，導(dǎo)航欄是通過無序列表<ul></ul>加上<li></li>標(biāo)簽制作完成。
1.初步結(jié)果
制作結(jié)果是這樣的 首先，先去除黑點(diǎn)。設(shè)置<ul></ul>的樣式。同時(shí)為了更好的設(shè)置導(dǎo)航欄樣式，需要設(shè)置<ul></ul>的內(nèi)外邊距為0；
ul{ list-style-type:none; margin: 0; padding: 0; }這是垂直導(dǎo)航欄，如果需要改為水平導(dǎo)航欄。則需要設(shè)置<li></li>標(biāo)簽的樣式為float:left;
這樣初步的導(dǎo)航欄就完成了，比較簡單。接下來就是為導(dǎo)航欄化妝的過程了?；?gif。
在為導(dǎo)航欄化妝前我們先來了解下導(dǎo)航欄的結(jié)構(gòu)。
首先是<ul></ul> 之后為<li></li>元素，為塊級(jí)元素
在<ul></ul>中分布。這就是導(dǎo)航欄的結(jié)構(gòu)，理解這個(gè)就可以很清晰的完成對(duì)導(dǎo)航欄的化妝了。
想要設(shè)計(jì)比較美觀的頁面時(shí)，導(dǎo)航欄肯定不能這樣的緊湊在一起，所以需要設(shè)計(jì)導(dǎo)航欄中元素的距離。
這個(gè)就是li標(biāo)簽的具體結(jié)構(gòu)，li標(biāo)簽是個(gè)塊元素，通過設(shè)置快元素的內(nèi)邊距距離來實(shí)現(xiàn)導(dǎo)航欄之間目錄的距離。
接下來就是設(shè)置ul li 的具體樣式了。首先給ul添加個(gè)背景。在修正一下li標(biāo)簽內(nèi)文字的位置，小強(qiáng)迫的居中。
差不多就是這樣了，可以說是給它上了粉底整個(gè)容什么的。
為了更加明顯的顯示鼠標(biāo)移動(dòng)效果。
這樣，一個(gè)比較簡單的垂直導(dǎo)航欄就完成了
emmmmm，當(dāng)設(shè)置為水平導(dǎo)航欄時(shí)，出現(xiàn)了ul背景顏色無法顯示的情況，就像這樣
就像這樣，ul標(biāo)簽未設(shè)置寬高度，所以沒有顯示出來。
經(jīng)過詢問度娘后，發(fā)現(xiàn)需要加上overflow:hidden的樣式。這樣背景就會(huì)顯示出來了。
在線咨詢
