在網(wǎng)頁(yè)設計中，導航菜單隨處可見(jiàn)，大多都是通過(guò)設置CSS列表樣式創(chuàng )建的，本例以介紹網(wǎng)頁(yè)中常見(jiàn)的導航菜單制作方法，來(lái)說(shuō)明列表網(wǎng)頁(yè)菜單在網(wǎng)頁(yè)設計中的應用。
【操作步驟】第1步，啟動(dòng)Dreamweaver，新建一個(gè)網(wǎng)頁(yè)，保存為index.html。
第2步，構建網(wǎng)頁(yè)結構，在<body>標簽中輸入以下內容：
<dl>
<dt> <a href="#a">娛樂(lè )健身</a> <a href="#b">餐飲服務(wù)</a> <a href="#c">購物指南</a> </dt>
<dd>
<ul id="a">
<li><a href="#">博納悠唐國際影城博納悠唐國際影城</a></li>
<li><a href="#">家富富僑足療（右安門(mén)店）家富富僑足療（右安門(mén)店）</a></li>
<li><a href="#">朱國凡良子（長(cháng)虹橋店）朱國凡良子（長(cháng)虹橋店）</a></li>
<li><a href="#">昆泰大酒店游泳館昆泰大酒店游泳館</a></li>
<li><a href="#">奧力健身俱樂(lè )部（亞運村旗艦店）</a></li>
<li><a href="#">炫力驕陽(yáng)健身（璽萌麗苑店）炫力驕陽(yáng)健身（璽萌麗苑店）</a></li>
</ul>
<ul id="b">
<li><a href="#">家富富僑足療（右安門(mén)店）家富富僑足療（右安門(mén)店）</a></li>
<li><a href="#">中秋宴預定火爆食材漲幅異常</a></li>
<li><a href="#">餐飲業(yè)升級轉型：要人才資源也要文化</a></li>
<li><a href="#">79元的“總統套餐”火了79元的“總統套餐”火了</a></li>
<li><a href="#">湖南餐飲大佬搶灘快餐業(yè)湖南餐飲大佬搶灘快餐業(yè)</a></li>
<li><a href="#">第四屆云南火鍋美食節開(kāi)幕第四屆云南火鍋美食節開(kāi)幕</a></li>
</ul>
<ul id="c">
<li><a href="#">網(wǎng)上購物，凡客誠品促銷(xiāo)中！優(yōu)質(zhì)低價(jià)，超值網(wǎng)購!</a></li>
<li><a href="#">藍色港灣購物藍色港灣購物</a></li>
<li><a href="#">走秀網(wǎng)-全球品牌網(wǎng)絡(luò )旗艦店：正品，支持貨到付款 </a></li>
<li><a href="#">昆泰大酒店游泳館昆泰大酒店游泳館</a></li>
<li><a href="#">英國出現少女購物狂掀起網(wǎng)絡(luò )炫富潮</a></li>
<li><a href="#">炫力驕陽(yáng)健身（璽萌麗苑店）炫力驕陽(yáng)健身（璽萌麗苑店）</a></li>
</ul>
</dd>
</dl>
在上面的代碼中，首先用<dl>標簽創(chuàng )建了一個(gè)定義列表，在<dt>標簽中，定義3個(gè)項目，分別是“娛樂(lè )健身”、“餐飲服務(wù)”和“購物指南”，在<dd>標簽中包含了3個(gè)<ul>標簽，用于創(chuàng )建<ul>無(wú)序列表，分別對應于上面的3個(gè)項目“娛樂(lè )健身”、“餐飲服務(wù)”和“購物指南”的內容。此時(shí)的顯示沒(méi)有任何CSS樣式設置。
第3步，在<head>標簽內添加<styletype="text/css">標簽，定義一個(gè)內部樣式表，然后輸入下面樣式，規劃整個(gè)頁(yè)面的基本顯示屬性：字體顏色、背景顏色等。
dl { /*定義列表樣式*/
position:absolute; /*定義元素的絕對定位*/
width:460px;
height:170px;
border:10px solid #eee; /*定義元素的邊框樣式*/ }dt { /*定義<dt>標簽（菜單）的樣式*/
position:absolute; /*定義元素的絕對定位，以父元素的原點(diǎn)為原點(diǎn)*/
right:1px; /*右邊框離父標簽1px*/}
dd { /*定義<dd>標簽（菜單內容）樣式*/
margin:0;
width:460px;
height:170px;
overflow:hidden; /*溢出隱藏*/ }
在以上代碼中，定義了<dl>列表的樣式。在<dd>樣式中，在網(wǎng)頁(yè)設計中，overflow:hidden語(yǔ)句的作用是將超出其設置的高度和寬度部分隱藏起來(lái)，如果缺少這句，那么3個(gè)<ul>標簽中的內容將全部顯示出來(lái)。
第4步，設置菜單項的鏈接樣式。
dt a { /*dt（菜單項）的鏈接樣式*/
display:block; /*設置為塊級元素*/
margin:1px; /*四周補白為1px，這樣設置可使菜單項有1px間隔*/
width:80px; /*菜單項的寬度*/
height:56px; /*菜單項的高度*/ text-align:center;
font:700 12px/55px "宋體"; /*用font屬性綜合設置字體樣式*/
color:#fff; /*字體顏色*/
text-decoration:none; /*不顯示項目符號*/
background:#666; /*背景顏色*/}
dt a:hover { /*鼠標懸停時(shí)菜單項的樣式*/
background:orange; /*鼠標懸停時(shí)背景色改為橙色*/}
在以上代碼中，設置了菜單項<dt>中的鏈接樣式，其中display:block將本是行內元素的<a>標簽改為了塊元素，通過(guò)該語(yǔ)句，當鼠標進(jìn)入到該塊的任何部分時(shí)都會(huì )被激活，而不僅僅是在文字上方時(shí)才被激活，也就是鼠標進(jìn)入菜單區域時(shí)，變?yōu)槌壬?/p>
第5步，設置<ul>列表和<li>標簽的樣式。
ul { /*設置列表ul樣式*/
margin:0; /*使列表內容緊靠父標簽*/
padding:0;
width:460px;
height:170px;
list-style-type:none; /*不顯示列表項目*/
background:#fff; /*背景顏色*/}li { /* <li>標簽的樣式*/
width:405px; /*<li>標簽的寬度*/
height:27px;
padding-left:20px; /*文字左側距離邊框有20px距離*/
font:12px/27px "宋體"; /*用font屬性綜合設置字體樣式*/
}在以上代碼中，定義了<ul>和<li>標簽的樣式，其中有一個(gè)語(yǔ)句讀者可能有些陌生：font:12px/27px"宋體"，在這里12px/27px表示字體大小為12px，行間距為27px，相當于：font-size:12px;line-height: 27px。此時(shí)網(wǎng)站導航完成設置。
當前文章標題：網(wǎng)頁(yè)設計中的導航列表
當前URL：http://amzcoolest.com/news/wzzz/3092.html
下一篇：如何設計多級菜單列表
