最基本的ulli構(gòu)成的橫向?qū)Ш讲藛?本站頂部所示)_Div+CSS教程

教程Tag：暫無Tag,歡迎添加,賺取U幣!

本站頂部所用TAGS導(dǎo)航標(biāo)簽，是典型的UL、LI所構(gòu)成的菜單。
在一般的網(wǎng)頁制作中，這樣的菜單是非經(jīng)常用的。
而構(gòu)成的技巧是非常簡單易學(xué)的。
公布代碼如下，稍看一下就應(yīng)該能夠理解！

XHTML代碼：

示例代碼 [hl5o.cn]

<div id="topmenu">
<ul>
<li><a href="http://hl5o.cn/default.asp?tag=Web Standard">Web Designing with Web Standards</a></li>
<li><a href="http://hl5o.cn/default.asp?tag=CSS Templates">CSS Templates</a></li>
<li><a href="http://hl5o.cn/default.asp?tag=CSS Layout Templates">CSS Layout Templates</a></li>
<li><a href="http://hl5o.cn/default.asp?tag=CSS Layout Example">CSS Layout Example</a></li>
<li><a href="http://hl5o.cn/default.asp?tag=CSS Web Design">CSS Web Design</a></li>
<li><a href="http://hl5o.cn/default.asp?tag=Div CSS網(wǎng)頁布局">Div CSS網(wǎng)頁布局</a></li>
<li><a href="http://hl5o.cn/default.asp?tag=Web2.0標(biāo)準(zhǔn)網(wǎng)頁">Web2.0標(biāo)準(zhǔn)網(wǎng)頁</a></li>
</ul>
</div>

CSS代碼：

示例代碼 [hl5o.cn]

*{
font-size:12px;
}
#topmenu {
width:900px;float:left;background:#ccc;
}
#topmenu ul{
list-style-type: none;
margin:10px 0 10px 40px;
padding: 0px;
}
#topmenu li{
display:inline;padding:0 5px;
}
#topmenu li a{
color:#000;
text-decoration:none;
}
#topmenu li a:hover{
color:#f00;
}

查看運(yùn)行效果：

代碼調(diào)試框 [hl5o.cn]

<!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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>mb5u.com</title>
<style type="text/css">
*{
font-size:12px;
}
#topmenu {
	width:900px;float:left;background:#ccc;
}
#topmenu ul{
	list-style-type: none;
	margin:10px 0 10px 40px;
	padding: 0px;
}
#topmenu li{
	display:inline;padding:0 5px;
}
#topmenu li a{
	color:#000;
	text-decoration:none;
}
#topmenu li a:hover{
	color:#f00;
}

</style>
</head>
<body>
<div   class="znjbzjn"   id="topmenu">
	<ul>
    <li><a href="/tz.php?url=hl5o.cn/default.asp?tag=Web Standard">Web Designing with Web Standards</li>
    <li><a href="/tz.php?url=hl5o.cn/default.asp?tag=CSS Templates"><a href="/tz.php?url=hl5o.cn/" target="_blank">CSS Templates</li>
    <li><a href="/tz.php?url=hl5o.cn/default.asp?tag=CSS Layout Templates">CSS Layout Templates</li>
    <li><a href="/tz.php?url=hl5o.cn/default.asp?tag=CSS Layout Example">CSS Layout Example</li>
    <li><a href="/tz.php?url=hl5o.cn/" target="_blank">CSS Web Design</li>
    <li><a href="/tz.php?url=hl5o.cn/default.asp?tag=Div CSS網(wǎng)頁布局">Div CSS網(wǎng)頁布局</li>
    <li><a href="/tz.php?url=hl5o.cn/default.asp?tag=Web2.0標(biāo)準(zhǔn)網(wǎng)頁">Web2.0標(biāo)準(zhǔn)網(wǎng)頁</li>
	</ul>
</div>
</body>
</html>

[ 可先修改部分代碼再運(yùn)行查看效果 ]