html菜单的基本制作

前面写过一点网页菜单的博文；下面再复习一些技术要点；

<!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>里面的内容；则显示如下；

html菜单的基本制作-LMLPHP

为了形成横条菜单，需要设置几个基本属性；

ul要设置list-style-type: none; 如果设置ul的背景色，就设置了整个菜单区域的背景色；

然后设置li的float: left; li 向左浮动；向左浮动之后，li就不是每个li占一行，一个跟一个，都在一行里；

然后为了使得a元素有菜单的效果，一般都设置a元素的 display: block;

基本菜单效果如下；

html菜单的基本制作-LMLPHP

bcbobo21cn

html菜单的基本制作