CSS菜单制作
1 <!DOCTYPE html>
2 <html lang="en">
3 <head>
4 <meta charset="UTF-8">
5 <title>菜单</title>
6 <style type="text/css">
7 .ui {
8 width: 1200px;
9 height: 100px;
10 list-style: none;
11 margin: 0;
12 padding: 0;
13 }
14
15 .ui li {
16 width: 200px;
17 margin: 0 10px;
18 float: left; /*该处换为display:inline-block;同样效果*/
19
20 }
21
22 .ui li a {
23 width: 70px;
24 height: 50px;
25 padding: 0 20px;
26 font-size: 12px;
27 line-height: 50px;
28 border: solid 1px;
29 {#background: red;#}
30 display: inline-block;
31 text-decoration: none;
32 cursor: pointer;
33 }
34 </style>
35 </head>
36 <body>
37 <ul class="ui">
38 <li><a href="#">首页</a></li>
39 <li><a href="#">登录</a></li>
40 <li><a href="#">注册</a></li>
41 <li><a href="#">服务大厅</a></li>
42 <li><a href="#">需求大厅</a></li>
43 </ul>
44 </body>
45 </html>
来源：https://www.cnblogs.com/stonelee2005/p/12164872.html