為什么我.nav1 a:hover,.nav1 a:active{}里的 background-color:#BE3948;沒有用?我直接改了ul標簽的才成功的
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>3.1頁面頭部制作練習題</title>
<style type="text/css">
/*在此定義相關樣式，控制列表的顯示形式*/
.nav1 li{
??? list-style-type: none;
??? float:left;
??? width:50px;
??? height:30px;
??? text-align:center;
}
.nav1 a:link,.nav1 a:visited{
?text-decoration: none;
?color: #000;
?font-size: 16px;
?font-family: "微軟雅黑"；
?
}
.nav1? a:hover,.nav1? a:active{
?text-decoration: none;
?color: #FF0;
?font-size: 16px;
?font-family: "微軟雅黑"；
?background-color:#BE3948;
?display:block;
}
ul a:hover,a:active{
??? background-color:#BE3948;
?display:block;
}
</style>
</head>
<body>
<h3>課程難度</h3>
<!--在此制作一個無序列表-->
<div>
??? <ul class="nav1">
??????? <li><a href="#" >全部</a></li>
??????? <li><a href="#" >初級</a></li>
??????? <li><a href="#" >中級</a></li>
??????? <li><a href="#" >高級</a></li>
??? </ul>
</div>
</body>
</html>
2018-12-18
首先line-height;是一種垂直居中的方法;一般高度和你的盒子高度相同(line-height: 顧名思義行高（行間距），指在文本中，行與行之間的 基線間的距離 )
- **弊端**：當文字內容的長度大于塊的寬時，就有內容脫離了塊。)
------
display:block;是將元素顯示為塊級元素
1、每個塊級元素都從新的一行開始，并且其后的元素也另起一行。（一個塊級元素獨占一行）
2、元素的高度、寬度、行高以及頂和底邊距都可設置。
3、元素寬度在不設置的情況下，是它本身父容器的100%（和父元素的寬度一致），除非設定一個寬度。
塊狀元素也可以通過代碼display:inline將元素設置為內聯元素(看一看加深印象)內聯元素特點:
1、和其他元素在一行上；
2、元素的高度、寬度及頂部和底部邊距不可設置；
3、元素的寬度就是它包含的文字或圖片的寬度，不可改變
希望能記住這兩個特點,加油!!
2018-12-09
找到了，.nav1? a:hover,.nav1? a:active{}中要設置line-height的值，具體這個值是多少好像都沒影響。
解決的辦法是把a標簽變為塊級元素，display:block這句話意思是a標簽變成塊級元素后就自動占滿了ul標簽嗎？而且是自動分攤了ul標簽么？寬度？