最基本的ulli構成的橫向導航菜單(本站頂部所示)_Div+CSS教程
教程Tag：暫無Tag,歡迎添加,賺取U幣!
本站頂部所用TAGS導航標簽，是典型的UL、LI所構成的菜單。
在一般的網頁制作中，這樣的菜單是非經常用的。
而構成的技巧是非常簡單易學的。
公布代碼如下，稍看一下就應該能夠理解！
XHTML代碼：
CSS代碼：
查看運行效果：
[ 可先修改部分代碼 再運行查看效果 ]
在一般的網頁制作中，這樣的菜單是非經常用的。
而構成的技巧是非常簡單易學的。
公布代碼如下，稍看一下就應該能夠理解！
XHTML代碼：
示例代碼 [www.wf0088.com]
<div id="topmenu">
<ul>
<li><a href="http://www.wf0088.com/default.asp?tag=Web Standard">Web Designing with Web Standards</a></li>
<li><a href="http://www.wf0088.com/default.asp?tag=CSS Templates">CSS Templates</a></li>
<li><a href="http://www.wf0088.com/default.asp?tag=CSS Layout Templates">CSS Layout Templates</a></li>
<li><a href="http://www.wf0088.com/default.asp?tag=CSS Layout Example">CSS Layout Example</a></li>
<li><a href="http://www.wf0088.com/default.asp?tag=CSS Web Design">CSS Web Design</a></li>
<li><a href="http://www.wf0088.com/default.asp?tag=Div CSS網頁布局">Div CSS網頁布局</a></li>
<li><a href="http://www.wf0088.com/default.asp?tag=Web2.0標準網頁">Web2.0標準網頁</a></li>
</ul>
</div>
<ul>
<li><a href="http://www.wf0088.com/default.asp?tag=Web Standard">Web Designing with Web Standards</a></li>
<li><a href="http://www.wf0088.com/default.asp?tag=CSS Templates">CSS Templates</a></li>
<li><a href="http://www.wf0088.com/default.asp?tag=CSS Layout Templates">CSS Layout Templates</a></li>
<li><a href="http://www.wf0088.com/default.asp?tag=CSS Layout Example">CSS Layout Example</a></li>
<li><a href="http://www.wf0088.com/default.asp?tag=CSS Web Design">CSS Web Design</a></li>
<li><a href="http://www.wf0088.com/default.asp?tag=Div CSS網頁布局">Div CSS網頁布局</a></li>
<li><a href="http://www.wf0088.com/default.asp?tag=Web2.0標準網頁">Web2.0標準網頁</a></li>
</ul>
</div>
CSS代碼：
示例代碼 [www.wf0088.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;
}
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.wf0088.com]
[ 可先修改部分代碼 再運行查看效果 ]
相關Div+CSS教程：
- 相關鏈接：
- 教程說明：
Div+CSS教程-最基本的ulli構成的橫向導航菜單(本站頂部所示)
。