導航欄文字居中，註釋很多，希望能節省大家的時間。
varbar.html
<DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<link rel="stylesheet" type="text/css" href="varbar.css"/> <!-- 調用css -->
<title>導航欄</title>
</head>
<body>
<div class="menu"> <!-- class選擇器 -->
<div class="nav">
<ul> <!-- ul標籤 -->
<li><a href="#">導航</a></li> <!-- li標籤 -->
<li><a href="#">導航</a></li>
<li><a href="#">導航</a></li>
<li><a href="#">導航</a></li>
<li><a href="#">導航</a></li>
</ul>
</div>
</div>
</body>
</html>varbar.css
body
{
text-align:center; /* 文字居中 */
}
ul
{
list-style-type:none; /* ul前面的點 */
}
*
{
margin:0px 0px; /* 到邊框的距離 */
}
.menu
{
background:#404040; /* 導航條背景的顏色 */
}
.nav
{
margin:0 auto; /* 導航欄文字的位置 */
width:700px; /* 和文字寬度有關，不能小於文字寬度的總和 */
height:70px; /* 導航欄的寬度 */
}
.nav a
{
float:left; /* 導航欄的位置配置 */
width:140px; /* 選中的文字塊的長度 */
line-height:70px; /* 選中的文字塊的寬度 */
text-decoration: none; /* 去掉連接下劃線 */
font-size:25px; /* 字體大小 */
color: #FFFFFF; /* 字體顏色 */
}
.nav li a:hover
{
background-color: #D8D8D8; /* 選中的文字塊的顏色 */
text-decoration:none; /* 選中時去掉連接下劃線 */
}
.nav li a:link{
text-decoration:none; /* 連接被點之後沒有下劃線 */
}效果
