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>