前面写过一点网页菜单的博文;下面再复习一些技术要点;
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-
transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<style type="text/css">
ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: #0F0;
}
li {
float: left;
}
li a {
display: block;
color: white;
text-align: center;
padding: 14px 16px;
}
</style>
</head>
<body>
<ul>
<li><a href="#">首页</a></li>
<li><a href="#">新闻</a></li>
<li><a href="#">公司</a></li>
<li><a href="#">解决方案</a></li>
<li><a href="#">联系我们</a></li>
</ul>
</body>
</html>
先只看外观静态部分;
html菜单通常是用 ul-li 元素来制作,然后在li元素里面再包含 a 元素;这是最基本的构成;然后再用css来修饰;
上面代码,如果去掉 <style></style>里面的内容;则显示如下;
为了形成横条菜单,需要设置几个基本属性;
ul要设置list-style-type: none; 如果设置ul的背景色,就设置了整个菜单区域的背景色;
然后设置li的float: left; li 向左浮动;向左浮动之后,li就不是每个li占一行,一个跟一个,都在一行里;
然后为了使得a元素有菜单的效果,一般都设置a元素的 display: block;
基本菜单效果如下;