前面写过一点网页菜单的博文；下面再复习一些技术要点；
<!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;
基本菜单效果如下；
![[工业自动化-17]：西门子S7-15xxx编程 - 软件编程 - PLC编程语言以及与嵌入式编程的比较](https://img-blog.csdnimg.cn/893cd258508e41ff93e228bd493a95ec.png)
