首页 > 其他 > 详细

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

时间:2020-03-06 00:14:31      阅读:43      评论:0      收藏:0      [点我收藏+]
 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>

 

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

原文:https://www.cnblogs.com/kogmaw/p/12423751.html

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!