css3技术

最基本的ulli构成的横向导航菜单(本站顶部所示)_div+css布局教程

字号+ 作者:H5之家 来源:H5之家 2015-09-29 10:06 我要评论( )

最基本的ulli构成的横向导航菜单(本站顶部所示),学习最基本的ulli构成的横向导航菜单(本站顶部所示),最基本的ulli构成的横向导航菜单(本站顶部所示),查看

本站顶部所用TAGS导航标签,是典型的UL、LI所构成的菜单。
在一般的网页制作中,这样的菜单是非经常用的。
而构成的技巧是非常简单易学的。
公布代码如下,稍看一下就应该能够理解!

XHTML代码:

div css xhtml xml Example Source Code

Example Source Code []

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


CSS代码:

div css xhtml xml Example Source Code

Example Source Code []

*{
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 []


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


 

1.本站遵循行业规范,任何转载的稿件都会明确标注作者和来源;2.本站的原创文章,请转载时务必注明文章作者和来源,不尊重原创的行为我们将追究责任;3.作者投稿可能会经我们编辑修改或补充。

相关文章
网友点评