一篇文章教會(huì)你如何制做精美導(dǎo)航條

時(shí)間：2023-07-24 18:54:01 | 來(lái)源：網(wǎng)站運(yùn)營(yíng)

時(shí)間：2023-07-24 18:54:01 來(lái)源：網(wǎng)站運(yùn)營(yíng)

一篇文章教會(huì)你如何制做精美導(dǎo)航條：【一、項(xiàng)目背景】



讓更多的人去學(xué)習(xí)html，以浙江科技學(xué)院的導(dǎo)航欄為例， 教大家怎么去做一個(gè)橫向的導(dǎo)航欄。







【二、項(xiàng)目準(zhǔn)備】



準(zhǔn)備一個(gè)編程的軟件Dreamweaver，打開(kāi)軟件點(diǎn)擊文件新建一個(gè)叫導(dǎo)航欄的項(xiàng)目，如下圖所示。







點(diǎn)擊確定之后，會(huì)彈出下圖。







【三、項(xiàng)目實(shí)施】



1. 在標(biāo)簽里面寫(xiě)下一個(gè)框架：







注：

標(biāo)簽定義導(dǎo)航鏈接的部分。

標(biāo)簽定義無(wú)序列表，
• 標(biāo)簽定義列表項(xiàng)目。
• 標(biāo)簽可用在有序列表 (
  ) 和無(wú)序列表 (
  ) 中。
  
  2. 寫(xiě)完運(yùn)行（運(yùn)行：右下角點(diǎn)擊f12運(yùn)行）看到效果，如下圖所示：
  
  
  
  3. 加入css樣式表（這里采用內(nèi)部樣式表）。
  
  3.1 CSS樣式表有兩種加入的方式 如圖：
  
  
  
  3.2 去除li帶來(lái)的小黑點(diǎn):
  
  
  li{ list-style: none; }4. 基于上述步驟，運(yùn)行一下 如下圖所示：
  
  
  
  5. 設(shè)置一下導(dǎo)航欄的樣式。
  
  1) 設(shè)置一下列表ul 的寬度 ，高度，背景顏色,文字位置居中（margin：0 auto）。
  
  Li 同樣的設(shè)置高度 。
  
  2) 去掉小黑點(diǎn) ，再設(shè)置文字的顏色 ，高度 ，內(nèi)邊距 ，（個(gè)人喜好 看著舒服就行）
  
  3) 設(shè)置文字的大小，去掉下劃線（text-decoration:none;）。
  
  
  
  下面是詳細(xì)備注
  
  ul li{float: left; # 把內(nèi)容左浮動(dòng)，這樣可以橫向排列 width: 100px; # 設(shè)置每個(gè)li的寬 height: 30px; # 設(shè)置每個(gè)li的高 background-color:pink # 設(shè)置li的背景顏色為粉色 border: 1px solid 6495ED; # 設(shè)置li的邊框顏色以及邊框大小 text-align: center; # 設(shè)置li中的文字樣式為居中 line-height: 30px; # 設(shè)置li中文字舉例上邊框的高度}ulli:hover{background-color: aqua;} # 設(shè)置將鼠標(biāo)放到li時(shí)的背景顏色ul li:hover a{color: black;} # 設(shè)置將鼠標(biāo)放到li中的a標(biāo)簽的內(nèi)容時(shí)的文字顏色6. 完整代碼，如下圖所示。
  
  
  
  7. 運(yùn)行之后，效果圖如下圖所示。
  
  
  
  【四、總結(jié)】
  
  1. Html能做的效果非常多，希望你耐心的去學(xué)習(xí)，同時(shí)希望碰到問(wèn)題主動(dòng)搜索，嘗試一下總會(huì)有解決方法。
  
  2. 如果需要本文源碼，請(qǐng)?jiān)诠娞?hào)后臺(tái)回復(fù)“導(dǎo)航欄”三個(gè)字獲取。
  
  看完本文有收獲？請(qǐng)轉(zhuǎn)發(fā)分享給更多的人
  
  IT共享之家想學(xué)習(xí)更多Python網(wǎng)絡(luò)爬蟲(chóng)與數(shù)據(jù)挖掘知識(shí)，可前往專(zhuān)業(yè)網(wǎng)站：http://pdcfighting.com/