第二十八节 元素类型转换实例 

 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             margin: 50px auto 0;
11             font-size: 0;
12         }
13 
14         .menu a{
15             width: 98px;
16             height: 48px;
17             background-color: #fff;
18             border:1px solid gold;
19             font-size: 16px;  /* 消除元素之间因为代码换行产生的间距 */
20             margin-left: -1px;  /* 用于合并border实线重复产生的2px */
21             line-height: 48px;  /* 设置行高和height相同，使文字上下居中 */
22             text-decoration: none;  /* 去掉下划线 */
23             color: pink;
24             font-family: 'Microsoft Yahei';  /* 设置字体 */
25             display: inline-block;  /* 转换元素类型 */
26             text-align: center;  /* 设置文字左右居中 */
27         }
28 
29         .menu a:hover{
30             background-color: gold;  /* 鼠标悬浮时设置 */
31             color: #fff
32         }
33     </style>
34 </head>
35 <body>
36     <div class="menu">
37         <a href="#">公司首页</a>
38         <a href="#">公司首页</a>
39         <a href="#">公司首页</a>
40         <a href="#">公司首页</a>
41         <a href="#">公司首页</a>
42         <a href="#">公司首页</a>
43         <a href="#">公司首页</a>
44     </div>
45 </body>
46 </html>

 

posted @ 2020-03-05 15:52  kog_maw  阅读(163)  评论(0)    收藏  举报