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

【一、項目背景】

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

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

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

點擊確定之后，會彈出下圖。

【三、項目實施】

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

注：

標(biāo)簽定義導(dǎo)航鏈接的部分。 標(biāo)簽定義無序列表，標(biāo)簽定義列表項目。 標(biāo)簽可用在有序列表 () 和無序列表 () 中。

2. 寫完運(yùn)行（運(yùn)行：右下角點擊f12運(yùn)行）看到效果，如下圖所示：

3. 加入css樣式表（這里采用內(nèi)部樣式表）。

3.1 CSS樣式表有兩種加入的方式 如圖：

3.2 去除li帶來的小黑點:

li{list-style: none; }

4. 基于上述步驟，運(yùn)行一下 如下圖所示：

5. 設(shè)置一下導(dǎo)航欄的樣式。

1) 設(shè)置一下列表ul 的寬度 ，高度，背景顏色,文字位置居中（margin：0 auto）。

Li 同樣的設(shè)置高度 。

2) 去掉小黑點 ，再設(shè)置文字的顏色 ，高度 ，內(nèi)邊距 ，（個人喜好 看著舒服就行）

3) 設(shè)置文字的大小，去掉下劃線（text-decoration:none;）。

下面是詳細(xì)備注

ulli{float: left; 把內(nèi)容左浮動，這樣可以橫向排列width:100px; 設(shè)置每個li的寬height:30px; 設(shè)置每個li的高background-color:pink 設(shè)置li的背景顏色為粉色 border:1pxsolid6495ED; 設(shè)置li的邊框顏色以及邊框大小text-align: center; 設(shè)置li中的文字樣式為居中l(wèi)ine-height:30px; 設(shè)置li中文字舉例上邊框的高度 } ulli:hover{background-color: aqua;} 設(shè)置將鼠標(biāo)放到li時的背景顏色ulli:hovera{color: black;} 設(shè)置將鼠標(biāo)放到li中的a標(biāo)簽的內(nèi)容時的文字顏色

6. 完整代碼，如下圖所示。

7. 運(yùn)行之后，效果圖如下圖所示。

【四、總結(jié)】

1. Html能做的效果非常多，希望你耐心的去學(xué)習(xí)，同時希望碰到問題主動搜索，嘗試一下總會有解決方法。

2. 如果需要本文源碼，請在公眾號后臺回復(fù)導(dǎo)航欄三個字獲取。

看完本文有收獲？請轉(zhuǎn)發(fā)分享給更多的人

IT共享之家

想學(xué)習(xí)更多Python網(wǎng)絡(luò)爬蟲與數(shù)據(jù)挖掘知識，可前往專業(yè)網(wǎng)站：http://pdcfighting.com/

非常感謝您讀完創(chuàng)新互聯(lián)的這篇文章："一篇文章教會你如何制做精美導(dǎo)航條"，僅為提供更多信息供用戶參考使用或為學(xué)習(xí)交流的方便。我們公司提供：網(wǎng)站建設(shè)、網(wǎng)站制作、官網(wǎng)建設(shè)、SEO優(yōu)化、小程序制作等服務(wù)，歡迎聯(lián)系我們提供您的需求。

本文名稱：一篇文章教會你如何制做精美導(dǎo)航條
文章鏈接：http://www.muchs.cn/news10/317510.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供營銷型網(wǎng)站建設(shè)、服務(wù)器托管、小程序開發(fā)、網(wǎng)站內(nèi)鏈、網(wǎng)站收錄、做網(wǎng)站

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時需注明來源： 創(chuàng)新互聯(lián)