一篇文章教會你如何制做精美導航條

2024-02-16 分類：網站建設

【一、項目背景】

讓更多的人去學習html，以廣東科技學院的導航欄為例，教大家怎么去做一個橫向的導航欄。

【二、項目準備】

準備一個編程的軟件Dreamweaver，打開軟件點擊文件新建一個叫導航欄的項目，如下圖所示。

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

【三、項目實施】

1. 在標簽里面寫下一個框架：

注：

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

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

3. 加入css樣式表（這里采用內部樣式表）。

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

3.2 去除li帶來的小黑點:

li{list-style: none; }

4. 基于上述步驟，運行一下如下圖所示：

5. 設置一下導航欄的樣式。

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

Li 同樣的設置高度。

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

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

下面是詳細備注

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

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

7. 運行之后，效果圖如下圖所示。

【四、總結】

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

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

看完本文有收獲？請轉發分享給更多的人

IT共享之家

想學習更多Python網絡爬蟲與數據挖掘知識，可前往專業網站：http://pdcfighting.com/

非常感謝您讀完創新互聯的這篇文章："一篇文章教會你如何制做精美導航條"，僅為提供更多信息供用戶參考使用或為學習交流的方便。我們公司提供：網站建設、網站制作、官網建設、SEO優化、小程序制作等服務，歡迎聯系我們提供您的需求。

本文名稱：一篇文章教會你如何制做精美導航條
文章鏈接：http://m.kartarina.com/news10/317510.html

成都網站建設公司_創新互聯，為您提供營銷型網站建設、服務器托管、小程序開發、網站內鏈、網站收錄、做網站

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

猜你還喜歡下面的內容