麻豆传媒在线免费看,成人在线啊v,男操女在线观看

使用無序列表制作導(dǎo)航菜單

無序列表在Web頁面中的用途

除了Div，Table，F(xiàn)orm外，我們最常用的Html元素之一就是無序列表ul，使用它通常可以實(shí)現(xiàn)以下形式：
1.實(shí)現(xiàn)文本數(shù)據(jù)列表，這是無序列表的原始意圖。
2.嵌套使用無序列表，以實(shí)現(xiàn)樹狀結(jié)構(gòu)。
3.修改無序列表的樣式，將它作為菜單使用。相對于用表格制作的菜單項(xiàng)，它修改起來比較方便，樣式也很容易設(shè)置。
第三點(diǎn)就是本文的主要議題。

無序列表的原始形式

<ul>

</ul>

原始效果：

要將無序列表作為菜單使用需要修改的地方

由上圖可見，無序列表原始的形式是難以作為菜單的，如果想拿無序列表作為菜單，要修改的地方可能有：
1.列表項(xiàng)的圓點(diǎn)一定要去掉，否則影響視覺效果。
2.要能將縱向列表變成橫向，因?yàn)樵S多菜單是橫向的。
3.如果有必要，需要取消列表項(xiàng)的下劃線。

對UL進(jìn)行樣式設(shè)置以取消圓點(diǎn)

要取消無序列表左邊的圓點(diǎn)，我們可以使用CSS對UL進(jìn)行樣式設(shè)置，將其list-style-type屬性設(shè)置為none就可以了。示例代碼如下：

/* menuDiv里的橫向菜單*/

#menuDiv ul{

margin:0;

padding:0;

list-style-type:none;

}

/* 類名為sideNav的div中的縱向菜單*/

.sideNav ul{

margin:0;

padding:0;

list-style-type:none;

}

讓子項(xiàng)浮動以修改列表項(xiàng)的方向

如果要將本為縱向的菜單改為橫向，可以將子項(xiàng)li的屬性float值改為left或是right，這樣子項(xiàng)就變成了向左浮動或是向右浮動，從縱向形式變成了橫向形式。示例如下：

/* menuDiv里的橫向菜單中的子項(xiàng)*/

#menuDiv li{

float:left;

font-size: 16px;

color:#c49a8e;

margin-left:0px;

margin-right:0px;

margin-top:0px;

margin-bottom:0px;

padding-left:0px;

padding-right:0px;

padding-top:0px;

padding-bottom:0px;

border-right: 1px solid #000000;

border-top: 0px solid #000000;

border-left: 0px solid #000000;

border-bottom: 0px solid #000000;

background:url(../img/fadedarktdbg.jpg);

}

修改鏈接的text-decoration屬性以取消鏈接文字的下劃線
代碼如下：

#menuDiv li a{

color:#c49a8e;

text-decoration: none;

background:url(../img/fadedarktdbg.jpg);

}

增加鏈接項(xiàng)的動態(tài)背景效果

使用偽類選擇器，我們還可以給菜單項(xiàng)加上動態(tài)效果，當(dāng)鼠標(biāo)掠過時能動態(tài)變化菜單的背景色，這樣能使當(dāng)前菜單項(xiàng)更醒目。通過修改子項(xiàng)鏈接在平時和鼠標(biāo)掠過時給予不同的背景圖片就能辦到。

代碼示例如下：

/* 子項(xiàng)鏈接為淡黑背景*/

#menuDiv li a{

color:#c49a8e;

text-decoration: none;

background:url(../img/fadedarktdbg.jpg);

}

/* 子項(xiàng)鏈接有鼠標(biāo)掠過時變成為深黑背景*/

#menuDiv li a:hover {

color:#c49a8e;

background:url(../img/darktdbg.jpg);

}

效果示例：

本文中涉及的全部代碼可以從如下地址下載，此壓縮文檔是一個Eclipse3.2工程Tomcat項(xiàng)目，導(dǎo)入后即能運(yùn)行：
http://www.aygfsteel.com/Files/sitinspring/CssSecondSample20080927113520.rar

posted on 2008-09-27 11:57 sitinspring 閱讀(5743) 評論(4) 編輯收藏所屬分類: HTML,CSS&JS


只有注冊用戶登錄后才能發(fā)表評論。




網(wǎng)站導(dǎo)航: 博客園 IT新聞 Chat2DB C++博客博問管理
相關(guān)文章: 樹狀側(cè)邊菜單欄示例滑動側(cè)邊菜單欄示例球拍式導(dǎo)航菜單效果的實(shí)現(xiàn) 四種CSS鏈接按鈕示例使用CSS設(shè)置表格二使用CSS設(shè)置表格使用無序列表制作導(dǎo)航菜單 CSS固定寬度兩欄居中示例 CSS可變寬度兩欄式布局例子按鈕按下效果的左側(cè)導(dǎo)航欄實(shí)現(xiàn)

# re: 使用無序列表制作導(dǎo)航菜單[未登錄] 2008-09-27 12:51 jack

# re: 使用無序列表制作導(dǎo)航菜單 2008-09-27 13:11 sclsch

# re: 使用無序列表制作導(dǎo)航菜單 2008-09-28 14:39 lsq

# re: 使用無序列表制作導(dǎo)航菜單 2008-09-28 14:59 sitinspring

春風(fēng)博客

導(dǎo)航

統(tǒng)計(jì)

公告

常用鏈接

留言簿(11)

隨筆分類(224)

隨筆檔案(126)

個人軟件下載

我的其它博客

我的鄰居們

最新隨筆

搜索

積分與排名

最新評論

閱讀排行榜

評論排行榜

使用無序列表制作導(dǎo)航菜單

評論