最基本的ulli构成的横向导航菜单(本站顶部所示)_Div+CSS教程

教程Tag：暂无Tag,欢迎添加,赚取U币!

缂備礁娲﹂埅绀慹deCMS閻熸瑥妫濋。鍫曞极濞嗘垟鏌�濞戞梹澹嗛埞鏍⒒閿燂拷缂佸鍠愬﹢鍥礉閳ヨ櫕鐝� 闂侇偄顦辩紞澶屾兜閺囨氨闉嶉柤杈ㄦ缁憋拷 闁哄啰濮撮崪鏍博濞嗘挻姣愮€规悶鍎遍崣锟�,闁谎勫劤鐎规娊寮堕崘顔兼濞戞挴鍋撻梺娆惧枛閸欏繘寮婚敓锟�!

本站顶部所用TAGS导航标签，是典型的UL、LI所构成的菜单。
在一般的网页制作中，这样的菜单是非经常用的。
而构成的技巧是非常简单易学的。
公布代码如下，稍看一下就应该能够理解！

XHTML代码：

示例代码 [www.mb5u.com]

<div id="topmenu">
<ul>
<li><a href="http://www.mb5u.com/default.asp?tag=Web Standard">Web Designing with Web Standards</a></li>
<li><a href="http://www.mb5u.com/default.asp?tag=CSS Templates">CSS Templates</a></li>
<li><a href="http://www.mb5u.com/default.asp?tag=CSS Layout Templates">CSS Layout Templates</a></li>
<li><a href="http://www.mb5u.com/default.asp?tag=CSS Layout Example">CSS Layout Example</a></li>
<li><a href="http://www.mb5u.com/default.asp?tag=CSS Web Design">CSS Web Design</a></li>
<li><a href="http://www.mb5u.com/default.asp?tag=Div CSS网页布局">Div CSS网页布局</a></li>
<li><a href="http://www.mb5u.com/default.asp?tag=Web2.0标准网页">Web2.0标准网页</a></li>
</ul>
</div>

CSS代码：

示例代码 [www.mb5u.com]

*{
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;
}

查看运行效果：

代码调试框 [www.mb5u.com]

<!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 id="topmenu">
	<ul>
    <li><a href="/tz.php?url=www.mb5u.com/default.asp?tag=Web Standard">Web Designing with Web Standards</li>
    <li><a href="/tz.php?url=www.mb5u.com/default.asp?tag=CSS Templates"><a href="/tz.php?url=www.mb5u.com/" target="_blank">CSS Templates</li>
    <li><a href="/tz.php?url=www.mb5u.com/default.asp?tag=CSS Layout Templates">CSS Layout Templates</li>
    <li><a href="/tz.php?url=www.mb5u.com/default.asp?tag=CSS Layout Example">CSS Layout Example</li>
    <li><a href="/tz.php?url=www.mb5u.com/" target="_blank">CSS Web Design</li>
    <li><a href="/tz.php?url=www.mb5u.com/default.asp?tag=Div CSS网页布局">Div CSS网页布局</li>
    <li><a href="/tz.php?url=www.mb5u.com/default.asp?tag=Web2.0标准网页">Web2.0标准网页</li>
	</ul>
</div>
</body>
</html>

[ 可先修改部分代码再运行查看效果 ]