現在我們正常的做法是應用ul、li標籤把連結作為無序列表（unordered list）來標識。再應用CSS樣式對其進行控制，按我們預想的形式在容器中顯示出來。對導航條使用無序列表似乎是不符合直觀感受的，因為我們習慣於把無序列表作為一個豎著推起來的清單項目，每個前面都放著一個列表預設標記。這似乎不符合導航條水平方向的習慣。但作為獨立清單項目集合的列表邏輯結構能夠適用於導航條裡的連結；而CSS的規則讓你能夠強製取代清單項目預設的表現形式，以消除它們並安排清單項目在容器內按水平方向排列，而不是從上而下的規則。現在讓我們來看看執行個體，根據無序列表建立CSS樣式和XHTML標籤的橫嚮導航菜單。
CSS代碼
<div id="nav"> <ul> <li><a href="http://www.php1.cn/"> <li><a href="http://www.php1.cn/"> <li><a href="http://www.php1.cn/"> <li><a href="http://www.php1.cn/"> <li><a href="http://www.php1.cn/"> <li><a href="http://www.php1.cn/"> <li><a href="http://www.php1.cn/"> </ul> </div>
我們再看看關於這段CSS代碼：
CSS代碼
#nav { height: 30px; width: 100%; background-color: #c00; } #nav ul { margin: 0 0 0 30px; padding: 0px; font-size: 12px; color: #FFF; line-height: 30px; whitewhite-space: nowrap; } #nav li { list-style-type: none; display: inline; } #nav li a { text-decoration: none; font-family: Arial, Helvetica, sans-serif; padding: 7px 10px; color: #FFF; } #nav li a:hover { color: #ff0; background-color: #f00; }
我們來看看上面的代碼的完整HTML，複製出來放到一個HTML頁面中，大家可以看到效果：
XML/HTML代碼
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>www.52css.com</title> <style type="text/css"> <!-- #nav { height: 30px; width: 100%; background-color: #c00; } #nav ul { margin: 0 0 0 30px; padding: 0px; font-size: 12px; color: #FFF; line-height: 30px; white-space: nowrap; } #nav li { list-style-type: none; display: inline; } #nav li a { text-decoration: none; font-family: Arial, Helvetica, sans-serif; padding: 7px 10px; color: #FFF; } #nav li a:hover { color: #ff0; background-color: #f00; } --> </style> </head> <body> <div id="nav"> <ul> <li><a href="http://www.php1.cn/"> <li><a href="http://www.php1.cn/">CSS教程</a></li> <li><a href="http://www.php1.cn/"> <li><a href="http://www.php1.cn/"> <li><a href="http://www.php1.cn/"> <li><a href="http://www.php1.cn/"> <li><a href="http://www.php1.cn/"> </ul> </div> </body> </html>
下面我們來解析上面的代碼：
xhtml代碼首先定義了一個容器div id="nav"。這個容器用來放置這個無序列表橫嚮導航菜單的內容，但也有人認為這個容器是多餘的，直接定義ul id="nav"就可以了。我們不建議你這樣做，要知道我們的網站是可擴充的，我們要為將來的擴充留有足夠的餘地，如果我們的導航樣式設計的更加複雜，僅有的ul是不能滿足需要的。我們定義這樣的容器也更符合我們編寫代碼的習慣。
#nav定義了視窗的寬高及背景顏色。#nav ul包含有margin和padding聲明，字型及顏色聲明。line-height: 30px;是非常重要的定義，如果取消掉行高的定義，我們的連結文字垂直置中就可能受到影響。white-space: nowrap;或許大家並不能理解有什麼作用，它定義了強制在同一行內顯示所有文本，直到文本結束或者遭遇br對象。
#nav li中的list-style-type: none;去除了清單項目所使用的預設標記。使其更象是純文字，而沒有列表標記。display: inline;聲明則能夠讓清單項目在頁面上從左向右浮動，而不會讓每個項目顯示在單獨的行裡而從上至下的排列。這兩項聲明是我們實現無序列表橫嚮導航菜單的關鍵。
#nav li a和#nav li a:hover定義了連結的樣式。其中的內容就不作深入了，唯一要講的就是：padding: 7px 10px;它是用來控制連結文字之間的空白間隔的，你可以試著改變數值試試看。
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
