HTML+CSS制作導(dǎo)航條
戊辰君
導(dǎo)航條是一個網(wǎng)站中必不可少的元素,那么如何用HTML和CSS制作一個導(dǎo)航條呢?下面小編給大家分享一下。
工具/材料
Sublime Text
首先打開SublimeText軟件,新建一個html頁面,并且在html頁面中準備好html結(jié)構(gòu),如下圖所示
接下來我們在html的body結(jié)構(gòu)里添加導(dǎo)航條的內(nèi)容,如下圖所示
然后就需要在style標簽中用CSS對導(dǎo)航條的樣式進行定義了,如下圖所示,書寫樣式的時候一定要注意寫在style標簽里面
最后運行html頁面,你就會看到如下圖所示的導(dǎo)航條,當鼠標放在某個導(dǎo)航上時,背景色會變成紅色