使用css布局橫向導航欄，css應用給網頁樣式的方式，就相當於，給人怎么去穿上衣服，不同的衣服有不同的穿法，這里我們使用的是內聯式。
在這里 我們可以適當的把值調的大一點，這樣我們就可以很容易的對比。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<title>如何使用css布局橫向導航欄</title>
<style type="text/css">
body {
margin:0px;padding:0px;
}
ul {
list-style:none;/*去除項列表前面的圓點*/
}
ul li {
float:left;/**使列表項不再遵循默認的自上而下樣式,使之變成橫向列表*/
}
/**這時候的列表雖然是橫着的，卻是一個整的像一塊大餅，所以我們要想到塊狀思想。使用display:block，將其分割*/
ul li a {
display: block; /*切割完畢,變成塊狀，這下我們就可以實現內外邊距，邊框背景等屬性*/
width: 200px; /*寬度設置*/
padding-top: 10px; /*上內邊距，通俗點講就是導航欄離頂部的距離*/
padding-left: 10px; /*同上*/
padding-right: 10px; /*同上*/
text-align: center; /*文本居中顯示*/
font-size: 40px; /*設置字體的大小*/
color: red; /*設置字體的顏色*/
text-decoration: none; /*下划線設置*/
}
/*錨偽類還有link visited hover active分別為未訪問，已訪問，鼠標移動鏈接上，選定的連接，這里我只寫了移動到連接的例子*/
ul li a:hover{
color:blue; /*偽類：指向鏈接時的字體顏色*/
background-color:#8DC7DD; /*偽類：指向鏈接時的背景色*/
text-decoration:underline; /*偽類：指向鏈接時的字體裝飾*/
font-weight:bold; /*偽類：指向連接時的字體粗細*/
}
</style>
</head>
<body>
<div id="nav">
<ul>
<li><a href="#">首頁</a></li>
<li><a href="#">心路</a></li>
<li><a href="#">歷程</a></li>
<li><a href="#">設計</a></li>
<li><a href="#">代碼</a></li>
<li><a href="#">優化</a></li>
</ul>
</div>
</body>
</html>
本菜鳥剛接觸css，希望各路大神可以賜教 企鵝號：912220277
