咱們這節主要講解CSS如何製作網頁中採用的菜單，其中包括項目列表、無需表格的菜單、菜單的橫豎裝換以及流行的Tab菜單。
我們首先看項目列表：列表的符號；我們看看代碼：
<html><head><title>項目列表</title><style><!--body{background-color:#c1daff;}ul{font-size:0.9em;color:#00458c;list-style-type:decimal;/* 項目編號 */}--></style> </head><body><p>水上運動</p><ul><li>freestyle 自由泳</li><li>backstroke 仰泳</li><li>breaststroke 蛙泳</li><li>butterfly 蝶泳</li><li>individual medley 個人混合泳</li><li>freestyle relay 自由泳接力</li></ul></body></html>
本文部分很簡單，ul無符號的項目列表，和一群li標記，在CSS代碼中，單獨對ul進行了標記，最主要的是：list-style-type:circle。這句話表示項目列表符號採用空心圓進行表示。我們看一下這個瀏覽效果：
當然我們還可以設定不同顯示方式，大家自己來試試；儘管ul顯示的是無符號列表，但是在CSS中一樣能設定列表符號。我們的CSS不但可以製作列表的符號，我們接下來試試圖片符號，我們先看看效果：
我們看到這個跟上面咱們說的列表符號就不一樣了，這裡採用了圖片做符號。我們看一下這個代碼：
<html><head><title>圖片符號</title><style><!--body{background-color:#c1daff;}ul{font-family:Arial;font-size:13px;color:#00458c;list-style-image:url(icon1.jpg);/* 圖片符號 */}--></style> </head><body><p>單車</p><ul><li>Road cycling 公路單車賽</li><li>Track cycling 場地單車賽</li><li>sprint 追逐賽</li><li>time trial 計時賽</li><li>points race 計分賽</li><li>pursuit 爭先賽</li><li>Mountain bike 山地單車賽</li></ul></body></html>
代碼裡邊的list-style-image後面跟了一個圖片的連結。對於通常的html的設計者來說，最開始所製作的菜單，往往都得使用表格，將一個一個的超連結放進表格的儲存格中，而當引入了ul和li項目符號之後，製作菜單通常使用的方法是使用ul和li標記，我們看一下是如何?的：
<html><head><title>無需表格的菜單</title><style><!--body{background-color:#ffdee0;}#navigation {width:200px;font-family:Arial;}#navigation ul {list-style-type:none;/* 不顯示項目符號 */margin:0px;padding:0px;}#navigation li {border-bottom:1px solid #ED9F9F;/* 添加底線 */}#navigation li a{display:block;/* 區塊顯示 */padding:5px 5px 5px 0.5em;text-decoration:none;border-left:12px solid ;/* 左邊的粗紅邊 */border-right:1px solid #711515;/* 右側陰影 */}#navigation li a:link, #navigation li a:visited{background-color:#F5950B;color:#FFFFFF;}#navigation li a:hover{/* 滑鼠經過時 */background-color:#990020;/* 改變背景色 */color:#ffff00;/* 改變文字顏色 */}--></style> </head><body><div id="navigation"><ul><li><a href="#">Home</a></li><li><a href="#">My Blog</a></li><li><a href="#">Friends</a></li><li><a href="#">Next Station</a></li><li><a href="#">Contact Me</a></li></ul></div></body></html>
本文部分非常的簡單，div id標記navigation，中間就是幾個簡單的項目列表，每一個子項都用一個a標記表示一個超連結，而代碼中，最關鍵的幾行，list-style-type:none 則不顯示項目符號；li標記添加底線。我們在a中設定統一設定了border-left:12px;以及border-right：1px；我們看一下顯示效果：
我們在做網頁的時候，有時候還需要橫向的菜單來顯示，而在CSS可以很輕鬆的進行橫豎菜單的轉換。我們先來看看效果：
我們來看看CSS代碼：
<html><head><title>菜單的橫豎轉換</title><style><!--body{background-color:#ffdee0;}#navigation {font-family:Arial;}#navigation ul {list-style-type:none;/* 不顯示項目符號 */margin:0px;padding:0px;}#navigation li {float:left;/* 水平顯示各個項目 */}#navigation li a{display:block;/* 區塊顯示 */padding:3px 6px 3px 6px;text-decoration:none;border:1px solid #711515;margin:2px;}#navigation li a:link, #navigation li a:visited{background-color:#c11136;color:#FFFFFF;}#navigation li a:hover{/* 滑鼠經過時 */background-color:#990020;/* 改變背景色 */color:#ffff00;/* 改變文字顏色 */}--></style> </head><body><div id="navigation"><ul><li><a href="#">Home</a></li><li><a href="#">My Blog</a></li><li><a href="#">Friends</a></li><li><a href="#">Next Station</a></li><li><a href="#">Contact Me</a></li></ul></div></body></html>
首先這個body部分跟咱們剛才那個例子完全相同，所不同的僅僅是CSS的設定，便可以輕鬆的實現菜單的橫豎轉換，這就有利於我們在後期的維護中，如果我們需要把菜單從豎向轉換成橫向或者又橫向轉換成豎向，將十分的方便，這裡就li屬性float:left，而a屬性還是一樣設定邊框等等。
通常在網頁的設計中，經常的採用了ul，li來設定菜單，這很便於我們後期的維護。
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
