HTML+CSS：通过li标签制作导航条

效果如下：
代码如下：
 1 <!doctype html>
 2 <html>
 3 <head>
 4 <meta charset="utf-8">
 5 <title>导航</title>
 6     <style type="text/css">
 7         .dao{
 8             list-style: none;
 9             padding-left: 1px;
10         }
11         .dao li{
12             float: left;
13             width: 84px;
14             margin-top: 100px;
15             background: #FFAE00;
16             text-align: left;
17             color: white;
18             border-right: 1px solid #fff;
19             color: black;
20             text-decoration: underline;
21             font-size: 10px;
22             line-height: 24px;
23         }
24         .dao li:hover{
25             font-size: 1.5em;
26         }
27         li input{
28             width: 84px;
29         }
30         li button{
31             background: #FFEB3D;
32             margin-left: 18px;
33             
34         }
35     </style>
36 </head>
37 <body>
38         <ul class="dao">
39             <li>·首页</li>
40             <li>·家用电器</li>
41             <li>·手机教程</li>
42             <li>·日用百货</li>
43             <li>·书籍</li>
44             <li>·帮助中心</li>
45             <li>·免费开店</li>
46             <li>·全球咨询</li>
47             <li>&nbsp</li>
48             <li><input type="text"></li>
49             <li><button type="submit">搜&nbsp;&nbsp;索</button></li>
50         </ul>
51 </body>
52 </html>