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

時間 2020-07-13

標籤一篇文章如何製做精美導航简体版

原文原文鏈接

【1、項目背景】css

讓更多的人去學習html，以廣東科技學院的導航欄爲例，教你們怎麼去作一個橫向的導航欄。html

【2、項目準備】編程

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

點擊肯定以後，會彈出下圖。ide

【3、項目實施】學習

1. 在<body>標籤裏面寫下一個框架：code

注：<nav>標籤訂義導航連接的部分。<ul> 標籤訂義無序列表，<li>標籤訂義列表項目。htm

<li> 標籤可用在有序列表 (<ol>) 和無序列表 (<ul>) 中。blog

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;）。

下面是詳細備註

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

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

7. 運行以後，效果圖以下圖所示。

【4、總結】

1. Html能作的效果很是多，但願你耐心的去學習，同時但願碰到問題主動搜索，嘗試一下總會有解決方法。

2. 若是須要本文源碼，請在公衆號後臺回覆「導航欄」三個字獲取。

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

IT共享之家