今天跟大家分享的是,網站導航欄的實現原理。小夥伴們不要被它高大上的名頭嚇到了哦~
因為任何導航欄的實現都離不開我們今天即將學習的HTML列表標籤。現在我們來看一下,即將用HTML列表標籤寫出的效果圖是怎樣的吧!
在寫出上述效果之前,先來給大家介紹一下,基本的列表元素有哪些吧?
無序列表
- 標籤定義無序列表,列表項默認使用粗體圓點進行標記。無序列表始於
- 標籤。開發中,無序列表一般應用於導航欄的製作。
有序列表
- 標籤定義有序列表,列表項默認使用數字進行標記。有序列表始於
- 標籤。
自定義列表
自定義列表以
- 標籤開始。每個自定義列表項以
- 開始。每個自定義列表項的定義以
- 開始。
掌握好上述標籤,我們就來分析一下,今天要寫的導航欄的佈局吧~
1)最外層:一個無序列表;
2)裡層:八個列表項;
3)最裡層:每個列表項中放置一個超鏈接。
現在我們將這段文字翻譯成HTML代碼,
寫完後效果是醬紫滴~
很醜是不是?沒關係,我們來將它美化一下。
1)首先,將超鏈接的默認樣式去掉;
2)其次,將無序列表的默認樣式(小圓點)去掉;
3)最後,將列表項依次向左浮動,水平排列(注意要清除li浮動後產生的副作用)。
接下來,我們將這段文字用CSS翻譯一下,
/* 清除小圓點 */
ul{
list-style-type:none;
}
/* 清除li浮動後產生的副作用 */
ul::after{
content: '';
display: block;
clear: both;
}
/* 設置列表項向左浮動 */
ul>li{
float:left;
}
ul>li>a{
/* 將行內元素變為塊級元素 */
display:block;
/* 清除下劃線 */
text-decoration:none;
/* 設置字體大小 */
font-size: 16px;
width:60px;
height:40px;
/* 設置行高,行高與高度一致時當行高與高度一致時,會使當行文字上下居中 */
line-height:40px;
/* 設置文本顏色 */
color: #ffffff;
/* 設置背景顏色 */
background:#f10180;
/* 設置文本居中 */
text-align: center;
}
ul>li>a.pink{
background-color: #bd1067;
}
/* 鼠標懸停效果 */
ul>li>a:hover{
color:#fff;
background:#c23a7e;
}
寫完後,導航欄變成了醬紫~
也許,關於浮動的知識點,大家還不是很瞭解。但是沒關係,在分享到CSS章節的時候,蘇萊會將CSS浮動單獨用一篇文章來介紹的,所以,小夥伴們不要為此擔心啦~
接下來,繼續為大家介紹一下怎麼通過CSS來修改超鏈接與無序列表的默認樣式吧!
首先,我們需要了解兩個CSS屬性
text-decoration 屬性
text-decoration 屬性允許對文本設置某種效果,如加下劃線,或去掉默認樣式的下劃線。以下是它常用到的屬性值,
list-style-type 屬性
list-style-type 屬性用於設置不同的列表樣式。以下是它常用到的屬性值,
其次,我們再複習一個之前說過的CSS屬性
color 屬性
color 屬性用於為不同元素設置文本顏色。常用的四類屬性值,
大家有沒有學會呢?沒學會的話記得私信小編"011"哦~
- 標籤,每個列表項始於
- 標籤。
- 標籤,每個列表項始於
閱讀更多 WEB前端交流 的文章