最基本的ulli构成的横向导航菜单(本站顶部所示)_Div+CSS教程
教程Tag:暂无Tag,欢迎添加,赚取U币!
本站顶部所用TAGS导航标签,是典型的UL、LI所构成的菜单。
在一般的网页制作中,这样的菜单是非经常用的。
而构成的技巧是非常简单易学的。
公布代码如下,稍看一下就应该能够理解!
XHTML代码:
CSS代码:
查看运行效果:
在一般的网页制作中,这样的菜单是非经常用的。
而构成的技巧是非常简单易学的。
公布代码如下,稍看一下就应该能够理解!
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>
<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;
}
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]
相关Div+CSS教程:
- 相关链接:
- 教程说明:
Div+CSS教程-最基本的ulli构成的横向导航菜单(本站顶部所示)。