目前互連網站前端頁面的大趨勢是採用DIV+CSS構架，因為它不僅能更受搜尋引擎青睞，而且一個良好結構的DIV架構網站可以從一定程度上提高頁面的展示速度。
在本教程中，我們將通過執行個體來給大家介紹：如何使用(X)HTML中的<UL>標籤來製作一個簡單橫嚮導航菜單。
為什麼要用<UL>標籤來製作導覽列和功能表列？用UL做導覽功能表之所以被廣泛採用，主要是因為它的代碼清晰，布局方便，更重要的是具有“語義”效果，能夠方便進一步SEO。
第一步、編寫橫向菜單的HTML代碼架構
請將以下代碼添加到HTML文檔的導覽列地區中。
<ul id="menu"><li><a href="http://www.baidu.com" mce_href="http://www.baidu.com">Baidu.Com</a></li><li><a href="http://www.Code52.Net" mce_href="http://www.Code52.Net">Code52.Net</a></li><li><a href="http://www.yahoo.com" mce_href="http://www.yahoo.com">Yahoo.Com</a></li><li><a href="http://www.google.com" mce_href="http://www.google.com"class="last">Google.Com</a></li></ul>
第二步、編寫CSS代碼
1、設定公用樣式
請將以下CSS代碼添加到HTML文檔的<head>...</head>標籤範圍中。
<style type="text/css" mce_bogus="1">#menu {font: 12px verdana, arial, sans-serif; /* 設定文字大小和字型樣式 */}#menu,#menu li {list-style: none; /* 將預設的列表符號去掉 */padding: 0; /* 將預設的內邊距去掉 */margin: 0; /* 將預設的外邊距去掉 */}</style>
大家都知道，<ul>中的各條目<li>預設都是縱向排列的，我們需要定義CSS來讓其橫向排列起來。
Tips：因為我們現在將導覽列拉出來獨立講解，所以需要設定一些公用樣式，如果您在 body 或其他地方已經重設了預設效果，以上代碼可以去掉
2、讓文字橫排
大家都知道，<ul>標籤下的項目<li>預設是縱向排列的，我們需要定義額外的CSS屬性讓其橫向排列。
</style><style type="text/css" mce_bogus="1">#menu li {float: left; /* 往左浮動 */}</style>
3、設定連結樣式：
<style type="text/css" mce_bogus="1">#menu li a {display: block; /* 將連結設為區塊層級元素 */padding: 8px 50px; /* 設定內邊距 */background: #3A4953; /* 設定背景色 */color: #fff; /* 設定文字顏色 */text-decoration: none; /* 去掉底線 */border-right: 1px solid #000; /* 在左側加上分隔線 */}</style>
我們用內邊距（即填充padding）的方式，讓每個菜單變得寬一些，如果你的菜單是中英文混排的，建議設定單個菜單的高寬，這樣可以避免中英文字元行高不一致導致的高度誤差。設定固定高度的方式：
<style type="text/css" mce_bogus="1">#menu li a {display: block; /* 將連結設為區塊層級元素 */width: 150px; /* 設定寬度 */height: 30px; /* 設定高度 */line-height: 30px; /* 設定行高，將行高和高度設定同一個值，可以讓單行文本垂直置中 */text-align: center; /* 置中對齊文字 */background: #3A4953; /* 設定背景色 */color: #fff; /* 設定文字顏色 */text-decoration: none; /* 去掉底線 */border-right: 1px solid #000; /* 在左側加上分隔線 */}</style>
4、連結懸停效果：
通過以上幾步的綜合作用，一個橫嚮導航欄的初步架構就出現了。此步主要是定義連結的懸停效果，讓導覽列更美觀。當然，如果要讓導覽列更炫麗，你可以在CSS懸停屬性上定義背景圖片。
<style type="text/css" mce_bogus="1">#menu li a:hover {background: #146C9C; /* 變換背景色 */color: #fff; /* 變換文字顏色 */}</style>
這裡的代碼一個缺陷，最右邊會多出來一個邊框，由於 :first-child 偽類不被IE系列瀏覽器所支援，我們只能單獨寫一個樣式，將最後一個邊框去掉，同時要給 HTML 程式碼增加一個額外選擇符。
<ul id="menu"><li><a href="http://www.baidu.com" mce_href="http://www.baidu.com">Baidu.Com</a></li><li><a href="http://www.Code52.Net" mce_href="http://www.Code52.Net">Code52.Net</a></li><li><a href="http://www.yahoo.com" mce_href="http://www.yahoo.com">Yahoo.com</a></li><li><a href="http://www.google.com" mce_href="http://www.google.com"class="last">Google.com</a></li></ul><style type="text/css" mce_bogus="1">#menu li a.last {border-right: 0; /* 去掉左側邊框 */}</style>
好了，到這裡一個簡單的橫嚮導航菜單就製作完成了，是不是很簡單？ 下面給出完整代碼：
<style type="text/css" mce_bogus="1">#menu {font: 12px verdana, arial, sans-serif;}#menu,#menu li {list-style: none;padding: 0;margin: 0;}#menu li {float: left;}#menu li a {display: block;/* 如果是中英文混排的文字，建議用固定寬度 width:150px; height:30px; line-height:30px; text-align:center; */padding: 8px 50px;background: #3A4953;color: #fff;text-decoration: none;border-right: 1px solid #000;}#menu li a:hover {background: #146C9C;color: #fff;text-decoration: none;border-right: 1px solid #000;}#menu li a.last {border-right: 0; /* 去掉左側邊框 */}</style><ul id="menu"><li><a href="http://www.baidu.com" mce_href="http://www.baidu.com">Baidu.Com</a></li><li><a href="http://www.Code52.Net" mce_href="http://www.Code52.Net">Code52.Net</a></li><li><a href="http://www.yahoo.com" mce_href="http://www.yahoo.com">Yahoo.com</a></li><li><a href="http://www.google.com" mce_href="http://www.google.com"class="last">Google.com</a></li></ul>
你可以查看我們製作的線上示範和下載本文提供的執行個體包。
你可能感興趣的文章：
CSS教程：用純CSS製作垂直/水平菜單
CSS之美：建立標準美觀的導覽列菜單
相容多瀏覽器的CSS橫向多級浮動下拉式功能表
CSS打造漂亮的步驟菜單Step Menu
漂亮的JavaScript浮動多級下拉式功能表
>>更多CSS和JavaScript炫麗的菜單效果
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
