精品国产乱码一区二区三区四区,欧美精品一区二区三区在线 ,精品视频在线播放

使用無序列表制作導航菜單

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

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

無序列表的原始形式

<ul>

</ul>

原始效果：

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

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

對UL進行樣式設置以取消圓點

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

/* menuDiv里的橫向菜單*/

#menuDiv ul{

margin:0;

padding:0;

list-style-type:none;

}

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

.sideNav ul{

margin:0;

padding:0;

list-style-type:none;

}

讓子項浮動以修改列表項的方向

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

/* menuDiv里的橫向菜單中的子項*/

#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);

}

增加鏈接項的動態背景效果

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

代碼示例如下：

/* 子項鏈接為淡黑背景*/

#menuDiv li a{

color:#c49a8e;

text-decoration: none;

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

}

/* 子項鏈接有鼠標掠過時變成為深黑背景*/

#menuDiv li a:hover {

color:#c49a8e;

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

}

效果示例：

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

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


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




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

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

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

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

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

春風博客

導航

統計

公告

常用鏈接

留言簿(11)

隨筆分類(224)

隨筆檔案(126)

個人軟件下載

我的其它博客

我的鄰居們

最新隨筆

搜索

積分與排名

最新評論

閱讀排行榜

評論排行榜

使用無序列表制作導航菜單

評論