導(dǎo)航條是一個(gè)網(wǎng)站中必不可少的元素，那么如何用HTML和CSS制作一個(gè)導(dǎo)航條呢？下面小編給大家分享一下。

工具/材料

Sublime Text

操作方法

• 01

  首先打開(kāi)Sublime Text軟件，新建一個(gè)html頁(yè)面，并且在html頁(yè)面中準(zhǔn)備好html結(jié)構(gòu)，如下圖所示

  
• 02

  接下來(lái)我們?cè)趆tml的body結(jié)構(gòu)里添加導(dǎo)航條的內(nèi)容，如下圖所示

  
• 03

  然后就需要在style標(biāo)簽中用CSS對(duì)導(dǎo)航條的樣式進(jìn)行定義了，如下圖所示，書(shū)寫(xiě)樣式的時(shí)候一定要注意寫(xiě)在style標(biāo)簽里面

  
• 04

  最后運(yùn)行html頁(yè)面，你就會(huì)看到如下圖所示的導(dǎo)航條，當(dāng)鼠標(biāo)放在某個(gè)導(dǎo)航上時(shí)，背景色會(huì)變成紅色

  

聲明：本篇經(jīng)驗(yàn)系酷知網(wǎng)「www.coozhi.com」原創(chuàng)，轉(zhuǎn)載請(qǐng)注明出處。