原味网络学院 → 网站设计 → Div+Css → 最基本的ul li构成的横向导航菜单（本站顶部所示）

最基本的ul li构成的横向导航菜单（本站顶部所示）

作者：佚名来源：网上收集发布时间：2008-5-24 15:28:21 点击率：: 本站顶部所用TAGS导航标签，是典型的UL、LI所构成的菜单。
在一般的网页制作中，这样的菜单是非常常用的。
而构成的技巧是非常简单易学的。
公布代码如下，稍看一下就应该能够理解！www.newcsS.Cn

XHTML代码：www.newcsS.Cn

javascript:window.open(this.src);" style="CURSOR: pointer" onload="return imgzoom(this,550)"> Example Source Code [www.52css.com]
<div id="topmenu">
    <ul>
    <li><a href="http://www.52css.com/default.asp?tag=Web+Standard">Web Designing with Web Standards</a></li>
    <li><a href="http://www.52css.com/default.asp?tag=CSS+Templates">CSS Templates</a></li>
    <li><a href="http://www.52css.com/default.asp?tag=CSS Layout Templates">CSS Layout Templates</a></li>
    <li><a href="http://www.52css.com/default.asp?tag=CSS Layout Example">CSS Layout Example</a></li>
    <li><a href="http://www.52css.com/default.asp?tag=CSS Web Design">CSS Web Design</a></li>
    <li><a href="http://www.52css.com/default.asp?tag=Div CSS网页布局">Div CSS网页布局</a></li>
    <li><a href="http://www.52css.com/default.asp?tag=Web2.0标准网页">Web2.0标准网页</a></li>
    </ul>
</div>

CSS代码：www.newcsS.Cn

javascript:window.open(this.src);" style="CURSOR: pointer" onload="return imgzoom(this,550)"> Example Source Code [www.52css.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.newcsS.Cn

javascript:window.open(this.src);" style="CURSOR: pointer" onload="return imgzoom(this,550)"> Source Code to Run [www.52css.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>newcss.cn</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> <li>Web Designing with Web Standards</li> <li>CSS Templates</li> <li>CSS Layout Templates</li> <li>CSS Layout Example</li> <li>CSS Web Design</li> <li>Div CSS网页布局</li> <li>Web2.0标准网页</li></ul></div></body></html>
    [ 可先修改部分代码再运行查看效果 ]

最基本的ul li构成的横向导航菜单（本站顶部所示）

推荐文章

热门文章