網(wǎng)頁(yè)設(shè)計(jì)中的導(dǎo)航列表

網(wǎng)頁(yè)設(shè)計(jì)中,導(dǎo)航菜單隨處可見(jiàn),大多都是通過(guò)設(shè)置CSS列表樣式創(chuàng)建的,本例以介紹網(wǎng)頁(yè)中常見(jiàn)的導(dǎo)航菜單制作方法,來(lái)說(shuō)明列表網(wǎng)頁(yè)菜單在網(wǎng)頁(yè)設(shè)計(jì)中的應(yīng)用。

【操作步驟】第1步,啟動(dòng)Dreamweaver,新建一個(gè)網(wǎng)頁(yè),保存為index.html。

第2步,構(gòu)建網(wǎng)頁(yè)結(jié)構(gòu),在<body>標(biāo)簽中輸入以下內(nèi)容:

<dl>    

<dt> <a href="#a">娛樂(lè)健身</a> <a href="#b">餐飲服務(wù)</a> <a href="#c">購(gòu)物指南</a> </dt>    

<dd>        

<ul id="a">            

<li><a href="#">博納悠唐國(guó)際影城博納悠唐國(guó)際影城</a></li>            

<li><a href="#">家富富僑足療(右安門(mén)店)家富富僑足療(右安門(mén)店)</a></li>            

<li><a href="#">朱國(guó)凡良子(長(zhǎng)虹橋店)朱國(guó)凡良子(長(zhǎng)虹橋店)</a></li>            

<li><a href="#">昆泰大酒店游泳館昆泰大酒店游泳館</a></li>            

<li><a href="#">奧力健身俱樂(lè)部(亞運(yùn)村旗艦店)</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="#">中秋宴預(yù)定火爆食材漲幅異常</a></li>            

<li><a href="#">餐飲業(yè)升級(jí)轉(zhuǎn)型:要人才資源也要文化</a></li>            

<li><a href="#">79元的“總統(tǒng)套餐”火了79元的“總統(tǒng)套餐”火了</a></li>            

<li><a href="#">湖南餐飲大佬搶灘快餐業(yè)湖南餐飲大佬搶灘快餐業(yè)</a></li>

<li><a href="#">第四屆云南火鍋美食節(jié)開(kāi)幕第四屆云南火鍋美食節(jié)開(kāi)幕</a></li>        

</ul>        

<ul id="c">            

<li><a href="#">網(wǎng)上購(gòu)物,凡客誠(chéng)品促銷中!優(yōu)質(zhì)低價(jià),超值網(wǎng)購(gòu)!</a></li>            

<li><a href="#">藍(lán)色港灣購(gòu)物藍(lán)色港灣購(gòu)物</a></li>            

<li><a href="#">走秀網(wǎng)-全球品牌網(wǎng)絡(luò)旗艦店:正品,支持貨到付款  </a></li>            

<li><a href="#">昆泰大酒店游泳館昆泰大酒店游泳館</a></li>            

<li><a href="#">英國(guó)出現(xiàn)少女購(gòu)物狂掀起網(wǎng)絡(luò)炫富潮</a></li>            

<li><a href="#">炫力驕陽(yáng)健身(璽萌麗苑店)炫力驕陽(yáng)健身(璽萌麗苑店)</a></li>        

</ul>    

</dd>

</dl>

在上面的代碼中,首先用<dl>標(biāo)簽創(chuàng)建了一個(gè)定義列表,在<dt>標(biāo)簽中,定義3個(gè)項(xiàng)目,分別是“娛樂(lè)健身”、“餐飲服務(wù)”和“購(gòu)物指南”,在<dd>標(biāo)簽中包含了3個(gè)<ul>標(biāo)簽,用于創(chuàng)建<ul>無(wú)序列表,分別對(duì)應(yīng)于上面的3個(gè)項(xiàng)目“娛樂(lè)健身”、“餐飲服務(wù)”和“購(gòu)物指南”的內(nèi)容。此時(shí)的顯示沒(méi)有任何CSS樣式設(shè)置。

第3步,在<head>標(biāo)簽內(nèi)添加<styletype="text/css">標(biāo)簽,定義一個(gè)內(nèi)部樣式表,然后輸入下面樣式,規(guī)劃整個(gè)頁(yè)面的基本顯示屬性:字體顏色、背景顏色等。

dl {                          /*定義列表樣式*/    

position:absolute;        /*定義元素的絕對(duì)定位*/    

width:460px;    

height:170px;    

border:10px solid #eee;    /*定義元素的邊框樣式*/ }dt {                           /*定義<dt>標(biāo)簽(菜單)的樣式*/    

position:absolute;         /*定義元素的絕對(duì)定位,以父元素的原點(diǎn)為原點(diǎn)*/    

right:1px;                 /*右邊框離父標(biāo)簽1px*/}

dd {                           /*定義<dd>標(biāo)簽(菜單內(nèi)容)樣式*/

margin:0;    

width:460px;    

height:170px;    

overflow:hidden;           /*溢出隱藏*/ }

在以上代碼中,定義了<dl>列表的樣式。在<dd>樣式中,在網(wǎng)頁(yè)設(shè)計(jì)中,overflow:hidden語(yǔ)句的作用是將超出其設(shè)置的高度和寬度部分隱藏起來(lái),如果缺少這句,那么3個(gè)<ul>標(biāo)簽中的內(nèi)容將全部顯示出來(lái)。

第4步,設(shè)置菜單項(xiàng)的鏈接樣式。

dt a {                              /*dt(菜單項(xiàng))的鏈接樣式*/    

display:block;                  /*設(shè)置為塊級(jí)元素*/    

margin:1px;                     /*四周補(bǔ)白為1px,這樣設(shè)置可使菜單項(xiàng)有1px間隔*/    

width:80px;                     /*菜單項(xiàng)的寬度*/    

height:56px;                    /*菜單項(xiàng)的高度*/    text-align:center;    

font:700 12px/55px "宋體";      /*用font屬性綜合設(shè)置字體樣式*/    

color:#fff;                     /*字體顏色*/    

text-decoration:none;           /*不顯示項(xiàng)目符號(hào)*/    

background:#666;                /*背景顏色*/}

dt a:hover {                       /*鼠標(biāo)懸停時(shí)菜單項(xiàng)的樣式*/    

background:orange;             /*鼠標(biāo)懸停時(shí)背景色改為橙色*/}

在以上代碼中,設(shè)置了菜單項(xiàng)<dt>中的鏈接樣式,其中display:block將本是行內(nèi)元素的<a>標(biāo)簽改為了塊元素,通過(guò)該語(yǔ)句,當(dāng)鼠標(biāo)進(jìn)入到該塊的任何部分時(shí)都會(huì)被激活,而不僅僅是在文字上方時(shí)才被激活,也就是鼠標(biāo)進(jìn)入菜單區(qū)域時(shí),變?yōu)槌壬?/p>

第5步,設(shè)置<ul>列表和<li>標(biāo)簽的樣式。

ul {                          /*設(shè)置列表ul樣式*/    

margin:0;                 /*使列表內(nèi)容緊靠父標(biāo)簽*/    

padding:0;    

width:460px;    

height:170px;    

list-style-type:none;     /*不顯示列表項(xiàng)目*/    

background:#fff;          /*背景顏色*/}li { /* <li>標(biāo)簽的樣式*/    

width:405px;              /*<li>標(biāo)簽的寬度*/    

height:27px;    

padding-left:20px;        /*文字左側(cè)距離邊框有20px距離*/    

font:12px/27px "宋體";    /*用font屬性綜合設(shè)置字體樣式*/

}在以上代碼中,定義了<ul>和<li>標(biāo)簽的樣式,其中有一個(gè)語(yǔ)句讀者可能有些陌生:font:12px/27px"宋體",在這里12px/27px表示字體大小為12px,行間距為27px,相當(dāng)于:font-size:12px;line-height: 27px。此時(shí)網(wǎng)站導(dǎo)航完成設(shè)置。

網(wǎng)站建設(shè)、網(wǎng)絡(luò)營(yíng)銷咨詢專線:0871-63535511(點(diǎn)擊可一鍵撥號(hào))