论坛交流
首页| 办公自动化| 网页制作| 平面设计| 动画制作| 数据库开发| 程序设计| 全部视频教程
应用视频: Windows | Word2007 | Excel2007 | PowerPoint2007 | Dreamweaver 8 | Fireworks 8 | Flash 8 | Photoshop cs | CorelDraw 12
编程视频: C语言视频教程 | HTML | Div+Css布局 | Javascript | Access数据库 | Asp | Sql Server数据库 |  Asp.net  | Flash AS
当前位置 > 文字教程 > div+css布局教程
Tag:css,入门,技巧,div,实例,示例,菜单,布局,web2.0,ul,li,经验,列表,web标准，xhtml,web标准,浏览器,兼容,css hack,表格,视频教程

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

文章类别：div+css布局 | 发表日期:2008-9-26 11:12:55
本站顶部所用TAGS导航标签，是典型的UL、LI所构成的菜单。
在一般的网页制作中，这样的菜单是非经常用的。
而构成的技巧是非常简单易学的。
公布代码如下，稍看一下就应该能够理解！

XHTML代码：

div css xhtml xml Example Source Code Example Source Code [www.21shipin.com]
<div id=\"topmenu\">
<ul>
<li><a href=\"http://www.21shipin.com/default.asp?tag=Web Standard\">Web Designing with Web Standards</a></li>
<li><a href=\"http://www.21shipin.com/default.asp?tag=CSS Templates\">CSS Templates</a></li>
<li><a href=\"http://www.21shipin.com/default.asp?tag=CSS Layout Templates\">CSS Layout Templates</a></li>
<li><a href=\"http://www.21shipin.com/default.asp?tag=CSS Layout Example\">CSS Layout Example</a></li>
<li><a href=\"http://www.21shipin.com/default.asp?tag=CSS Web Design\">CSS Web Design</a></li>
<li><a href=\"http://www.21shipin.com/default.asp?tag=Div CSS网页布局\">Div CSS网页布局</a></li>
<li><a href=\"http://www.21shipin.com/default.asp?tag=Web2.0标准网页\">Web2.0标准网页</a></li>
</ul>
</div>

CSS代码：

div css xhtml xml Example Source Code Example Source Code [www.21shipin.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;
}

查看运行效果：

div css xhtml xml Source Code to Run Source Code to Run [www.21shipin.com]

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

视频教程列表
文章教程搜索
 
div+css推荐教程
div+css热门教程
看全部视频教程
购买方式/价格
购买视频教程: 咨询客服
tel:15972130058