1. ul li縱向列表
ul li本身是一個列表，有自己的樣式，是縱向排列的，只是他的樣式我們不知道他在哪裏設置的，打開html文件，在瀏覽器中可以通過F12查看（他是不能刪除了只能重新設置新的樣式，來改變樣式）
在列表中ul li自帶樣式,樣式如下
ul, menu, dir {
display: block;
list-style-type: disc;
margin-block-start: 1em;
margin-block-end: 1em;
margin-inline-start: 0px;
margin-inline-end: 0px;
padding-inline-start: 40px;
}
li {
display: list-item;
text-align: -webkit-match-parent;
}
沒有作任更改時的樣式，如圖：
可消除列表前的符號，及至頂
ul,li{
margin: 0;
padding: 0;
font-family: "微軟雅黑";
font-size:16px;
list-style: none; /*列表符號樣式，裏面有可選三個參數*/
}
作更改後的樣式，如圖：
注：這個方式可用於清除所有的樣式（例 ：body的、a標籤、h1標籤的字體樣式等），這裏還用選擇器（羣組選擇器，用 “ ，”隔開），表示這些標籤下的樣式，具體在選擇器這章介紹
2. 橫向列表
縱向變爲橫向，利用float(浮動)
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>導航欄</title>
<style type="text/css">
.nav{ /*設置列表標籤的父元素，這裏只是爲了作介紹使用*/
border: 1px solid black;
width:400px;
height: 100px;
}
ul,li{ /*清除列表樣式*/
margin: 0;
padding: 0;
font-family: "微軟雅黑";
font-size:16px;
list-style: none; /*列表符號樣式，裏面有可選三個參數*/
}
.nav ul li{ /*設置列表樣式*/
border: 1px solid red;
width: 100px; /*設置列寬100*/
float:left;
line-height: 50px; /*設置行高50*/
}
</style>
</head>
<body>
<div class="nav">
<ul>
<li><a href="#">111</a></li>
<li><a href="#">222</a></li>
<li><a href="#">333</a></li>
</ul>
</div>
</body>
</html>
浮動後的樣式，如圖：
3. 更改鏈接樣式、鼠循停樣式、點擊後的樣式、正在點擊時的樣式
a的屬性：link(對a標籤做更改) 、visited（原來樣式） 、hover（鼠標懸停時樣式） 、 active（點擊後的樣式）
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<style type="text/css">
.nav{ /*設置列表標籤的父元素，這裏只是爲了作介紹使用*/
border: 1px solid black;
width:400px;
height: 100px;
}
ul,li{ /*清除列表樣式*/
margin: 0;
padding: 0;
font-family: "微軟雅黑";
font-size:16px;
list-style: none; /*列表符號樣式，裏面有可選三個參數*/
}
.nav ul li{ /*設置列表樣式*/
border: 1px solid red;
width: 100px; /*設置列寬100*/
float:left;
line-height: 50px; /*設置行高50*/
}
.nav ul li a:link{ /*設置a標籤本身樣式（在沒有點擊的樣式）*/
display: block; /*設置爲行內塊，使其作用域更大，在這裏可以使其不只是點擊文字，也可以鏈接*/
height: 45px;
border-bottom:4px solid black;/*爲了更好看這裏設置的一個下邊框黑色*/
background-color: darkcyan;
}
.nav ul li a:visited{ /*這個與上面一樣，也是沒有點擊時的樣式，但如果有了該樣式，會覆蓋上面這這個樣式*/
/*display: block; */
/*border-bottom:4px solid red; /*有的話會覆蓋邊框黑色替換成紅色*/
background-color: palegreen;
}
.nav ul li a:hover{ /*設置a標籤懸停時的樣式*/
/*display: block; */
background-color: pink;
}
.nav ul li a:active{ /*設置a標籤點擊後的樣式*/
border-bottom:4px solid black;
background-color: aqua;
}
</style>
</head>
<body>
<div class="nav">
<ul>
<li><a href="">111</a></li>
<li><a href="">222</a></li>
<li><a href="">333</a></li>
</ul>
</div>
</body>
</html>
link(對a標籤做更改)
設置塊狀元素（只能在這裏設置，也最先認識他），可以設置沒有操作時的本身樣式
visited（原來樣式）
設置沒有操作時的本身樣式，這裏設置的樣式會覆蓋上面link中的樣式
hover（鼠標懸停時樣式）
這裏只作了對111鼠標時的樣式
active（點擊後的樣式）
這裏是對111點擊後的樣式
注：這裏的順序不更改link>visited>hover>active ,依次從上往下執行，可以沒後面的，但不能沒有前面的
4. 點擊後鏈接抖動
通過以上方式設置點擊後對上邊框和下邊框的大小
.nav ul li a:active{ /*設置a標籤點擊後的樣式*/
border-top: 20px solid greenyellow;
border-bottom:4px solid black;
background-color: aqua;
}
