第三十二 列表元素制作菜单栏 

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>Document</title>
 6     <style type="text/css">
 7         .menu{
 8             width: 694px;
 9             height: 50px;
10             /*background-color: cyan;*/
11             list-style: none;  /* 去掉无序列表前的小圆点 */
12             margin: 50px auto 0;  /* ul元素本身自带margin */
13             padding: 0;  /* ul元素本身自带padding */
14         }
15 
16         .menu li{
17             width: 98px;
18             height: 48px;
19             border: 1px solid gold;
20             float: left;
21             margin-left: -1px;
22         }
23 
24         .menu li a{
25             /*background-color: gold;*/
26             display: block;
27             width: 98px;
28             height: 48px;
29             text-align: center;
30             line-height: 48px;
31             text-decoration: none;
32             color: pink;
33             font-size: 16px;
34             font-family: 'Microsoft Yahei';
35         }
36 
37         .menu li a:hover{
38             background-color: gold;
39             color: #fff;
40         }
41     </style>
42 </head>
43 <body>
44     <!-- ul.menu>(li>a{公司简介})*7 -->
45     <ul class="menu">
46         <li><a href="#">公司简介</a></li>
47         <li><a href="#">公司简介</a></li>
48         <li><a href="#">公司简介</a></li>
49         <li><a href="#">公司简介</a></li>
50         <li><a href="#">公司简介</a></li>
51         <li><a href="#">公司简介</a></li>
52         <li><a href="#">公司简介</a></li>
53     </ul>
54 </body>
55 </html>

 

posted @ 2020-03-05 23:18  kog_maw  阅读(199)  评论(0)    收藏  举报