最基本的ulli構成的橫向導航菜單(本站頂部所示)_Div+CSS教程

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

本站頂部所用TAGS導航標簽，是典型的UL、LI所構成的菜單。
在一般的網頁制作中，這樣的菜單是非經常用的。
而構成的技巧是非常簡單易學的。
公布代碼如下，稍看一下就應該能夠理解！

XHTML代碼：

示例代碼 [www.ghpqjb.com]

<div id="topmenu">
<ul>
<li><a href="http://www.ghpqjb.com/default.asp?tag=Web Standard">Web Designing with Web Standards</a></li>
<li><a href="http://www.ghpqjb.com/default.asp?tag=CSS Templates">CSS Templates</a></li>
<li><a href="http://www.ghpqjb.com/default.asp?tag=CSS Layout Templates">CSS Layout Templates</a></li>
<li><a href="http://www.ghpqjb.com/default.asp?tag=CSS Layout Example">CSS Layout Example</a></li>
<li><a href="http://www.ghpqjb.com/default.asp?tag=CSS Web Design">CSS Web Design</a></li>
<li><a href="http://www.ghpqjb.com/default.asp?tag=Div CSS網頁布局">Div CSS網頁布局</a></li>
<li><a href="http://www.ghpqjb.com/default.asp?tag=Web2.0標準網頁">Web2.0標準網頁</a></li>
</ul>
</div>

CSS代碼：

示例代碼 [www.ghpqjb.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.ghpqjb.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   class="kk2ucac"   id="topmenu">
	<ul>
    <li><a href="/tz.php?url=www.ghpqjb.com/default.asp?tag=Web Standard">Web Designing with Web Standards</li>
    <li><a href="/tz.php?url=www.ghpqjb.com/default.asp?tag=CSS Templates"><a href="/tz.php?url=www.ghpqjb.com/" target="_blank">CSS Templates</li>
    <li><a href="/tz.php?url=www.ghpqjb.com/default.asp?tag=CSS Layout Templates">CSS Layout Templates</li>
    <li><a href="/tz.php?url=www.ghpqjb.com/default.asp?tag=CSS Layout Example">CSS Layout Example</li>
    <li><a href="/tz.php?url=www.ghpqjb.com/" target="_blank">CSS Web Design</li>
    <li><a href="/tz.php?url=www.ghpqjb.com/default.asp?tag=Div CSS網頁布局">Div CSS網頁布局</li>
    <li><a href="/tz.php?url=www.ghpqjb.com/default.asp?tag=Web2.0標準網頁">Web2.0標準網頁</li>
	</ul>
</div>
</body>
</html>

[ 可先修改部分代碼再運行查看效果 ]