欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

用CSS開發(fā)時(shí)髦的導(dǎo)航欄第二篇

 更新時(shí)間：2008年05月26日 19:10:43   作者：  
我能夠使用CSS和列表創(chuàng)造有子菜單的導(dǎo)航欄嗎？ 有時(shí)候我們需要超過一級(jí)的導(dǎo)航欄 – 可是在CSS里面用樣式化的列表能夠創(chuàng)建多級(jí)導(dǎo)航欄嗎？

解決方案

在一個(gè)導(dǎo)航系統(tǒng)中顯示子菜單最好的辦法是在一個(gè)列表中創(chuàng)建子列表。這樣標(biāo)記的兩級(jí)導(dǎo)航欄很容易被理解 – 哪怕瀏覽器不支持CSS。

為了產(chǎn)生多級(jí)導(dǎo)航欄，我們創(chuàng)建一個(gè)嵌套的列表，為這些新的列表項(xiàng)樣式化顏色、邊界和鏈接屬性：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"

"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" lang="en-US">

<head>

<title>Lists as navigation</title>

<meta http-equiv="content-type"

content="text/html; charset=utf-8" />

<link rel="stylesheet" type="text/css" href="listnav_sub.css" />

</head>

<body>

<div id="navigation">

<ul>

<li><a href="#">Recipes</a>

<ul>

<li><a href="#">Starters</a></li>

<li><a href="#">Main Courses</a></li>

<li><a href="#">Desserts</a></li>

</ul>

</li>

<li><a href="#">Contact Us</a></li>

<li><a href="#">Articles</a></li>

<li><a href="#">Buy Online</a></li>

</ul>

</div>

</body>

</html>

#navigation {

width: 200px;

}

#navigation ul {

list-style: none;

margin: 0;

padding: 0;

}

#navigation li {

border-bottom: 1px solid #ED9F9F;

}

#navigation li a:link, #navigation li a:visited {

font-size: 90%;

display: block;

padding: 0.4em 0 0.4em 0.5em;

border-left: 12px solid #711515;

border-right: 1px solid #711515;

background-color: #B51032;

color: #FFFFFF;

text-decoration: none;

}

#navigation li a:hover {

background-color: #711515;

color: #FFFFFF;

}

#navigation ul ul {

margin-left: 12px;

}

#navigation ul ul li {

border-bottom: 1px solid #711515;

margin:0;

}

#navigation ul ul a:link, #navigation ul ul a:visited {

background-color: #ED9F9F;

color: #711515;

}

#navigation ul ul a:hover {

background-color: #711515;

color: #FFFFFF;

}

 

增加這些以后的顯示效果如圖4。

navigation_css-list-subnav.png

圖4. 包含子菜單的導(dǎo)航欄

討論

嵌套列表是用來描述我們正在做的導(dǎo)航欄系統(tǒng)的好辦法。第一個(gè)列表包含站點(diǎn)的主要部分，在Recipes下面的子列表顯示了Recipes范圍之內(nèi)的子部分。即使沒有任何CSS樣式，列表的結(jié)構(gòu)依然清晰且容易理解，就象你在圖5看到的一樣。

navigation_sense-without-css.png

圖5：沒有使用樣式，包含子菜單的導(dǎo)航欄

下面是我們用來在主要項(xiàng)目的li元素里面標(biāo)記這個(gè)簡(jiǎn)單的嵌套列表的HTML代碼：

<ul>

<li><a href="#">Recipes</a>

<ul>

<li><a href="#">Starters</a></li>

<li><a href="#">Main Courses</a></li>

<li><a href="#">Desserts</a></li>

</ul>

</li>

<li><a href="#">Contact Us</a></li>

<li><a href="#">Articles</a></li>

<li><a href="#">Buy Online</a></li>

</ul>

用HTML，如果簡(jiǎn)單的使用本文前面的CSS，不做任何修改的話，導(dǎo)航菜單的顯示將如圖6。由于li元素繼承主菜單的樣式，子列表將呈現(xiàn)出主導(dǎo)航欄一樣的樣式。

navigation_sublist-mainnav-styles.png

圖6：采用默認(rèn)樣式表子菜單導(dǎo)航欄

為了讓嵌套的列表呈現(xiàn)出它是一個(gè)子菜單而不是主導(dǎo)航欄一部分的效果，讓我們?cè)黾右粋€(gè)樣式規(guī)則：

#navigation ul ul {

margin-left: 12px;

}

這個(gè)規(guī)則將縮進(jìn)嵌套列表，讓它在主菜單的右邊界對(duì)齊，象圖7顯示的這樣：

navigation_indent-subnav.png

圖7：帶有縮進(jìn)規(guī)則的導(dǎo)航欄

最后讓我們給嵌套表里面的li和a元素增加一些簡(jiǎn)單的樣式以便完善效果：

#navigation ul ul li {

border-bottom: 1px solid #711515;

margin: 0;

}

#navigation ul ul a:link, #navigation ul ul a:visited {

background-color: #ED9F9F;

color: #711515;

}

#navigation ul ul a:hover {

background-color: #711515;

color: #FFFFFF;

}

相關(guān)文章

最新評(píng)論