HTML布局水平導航條1制作

該文是用css制作個導航條，用豎線分隔，導航條是點擊的多個區塊。
步驟：
ul里設置需要數量的li，li中加上a鏈接
給ul加樣式，去掉默認的前面的點
給li設置左浮動，讓ul里的li橫向排列
a鏈接設置成塊狀顯示，設置寬高和背景色
給a加樣式，去默認的下划線，設置文本水平居中
設置文本垂直居中，由於沒有垂直居中樣式，用行高來讓鏈接里文字垂直居中
給a鏈接文本設置合適的顏色，替換默認的鏈接色
給已經設置成區塊的a鏈接加右側的邊線，邊線粗細樣式顏色
設置最后一個li去掉右邊線
如后期修改標簽內容，擔心內容超出，可給已經區塊顯示的a標簽設置overflow:hidden;

a標簽設置為block，然后設置寬高后，a標簽里面的文字可以用text-align:center設置水平居中，如果想垂直居中，可以設置行高和設置的a標簽的高height相等，這樣就能讓里面的文字在垂直方向上居中。
垂直居中的方法：設置line-height=區域a標簽的高。
該文中用的右側邊框先是黑色單線1px粗細，太黑了和背景色顯示對比比較突兀，可根據需要修改。

樣式代碼：

ul{list-style-type:none;}
li{float:left;border-right:1px solid #000000;}
li a{display:block;width:100px;height:50px;background-color:#e88383;text-align:center;text-decoration:none;line-height:50px;color:#ffffff;overflow:hidden;}
li:last-child {border-right: none;}

頁面代碼：

<ul>
<li><a href="">簡短問答</a></li>
<li><a href="bloglistindex.html">博文備份</a></li>
<li><a href="">測試用</a></li>
<li><a href="">關於</a></li>
</ul>

步驟圖示：

 

上面是用豎線分隔鏈接塊，也可以使用背景色不同，或背景圖不同進行區分，因為邊線每個是1px大小，所以整個導航條相比於用背景色和背景圖的多出了一點距離。

樣式代碼：

ul{list-style-type:none;}
li{float:left;border-right:1px solid #727272;}
li a{display:block;width:100px;height:50px;background-color:#e88383;text-align:center;text-decoration:none;line-height:50px;color:#ffffff;overflow:hidden;}
li:last-child {border-right: none;}

.ul2{clear:both;margin-top:70px;}
.ul2 li{float:left;border:none;}
.ul2 a{display:block;width:100px;height:50px;text-align:center;text-decoration:none;line-height:50px;color:#ffffff;overflow:hidden;}
.a1{background-color:#e88383;}
.a2{background-color:#521f79;}
.a3{background-color:#bb8932;}
.a4{background-color:#265d19;}

.ul3{clear:both;margin-top:130px;}
.ul3 li{float:left;border:none;}
.ul3 a{display:block;width:100px;height:50px;text-align:center;text-decoration:none;line-height:50px;color:#ffffff;overflow:hidden;}
.ul3 .a1{background-image:url(../images/b_1.png);}
.ul3 .a2{background-image:url(../images/b_2.png);}
.ul3 .a3{background-image:url(../images/b_3.png);}
.ul3 .a4{background-image:url(../images/b_4.png);}

HTML頁面代碼：

<ul>
<li><a href="">簡短問答</a></li>
<li><a href="bloglistindex.html">博文備份</a></li>
<li><a href="">測試用</a></li>
<li><a href="">關於</a></li>
</ul>

<ul class="ul2">
<li><a href="" class="a1">簡短問答</a></li>
<li><a href="bloglistindex.html" class="a2">博文備份</a></li>
<li><a href="" class="a3">測試用</a></li>
<li><a href="" class="a4">關於</a></li>
</ul>

<ul class="ul3">
<li><a href="" class="a1">簡短問答</a></li>
<li><a href="bloglistindex.html" class="a2">博文備份</a></li>
<li><a href="" class="a3">測試用</a></li>
<li><a href="" class="a4">關於</a></li>
</ul>

圖示：由於每個邊線都是1px寬度，所以比下面的背景色和背景圖的寬一些。由於上面那個黑色線條分割線太突兀，下面這個換了點淺淺的顏色。樣式和上面導航條一樣，就是把背景色設置成不同的，或把背景色換成了背景圖。