識點寫在注釋中
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>MENU</title> <style type="text/css"> .menu { width: 694px; height: 50px;
/*設置元素水平居中*/
margin: 50px auto 0;
/*去除內聯元素間隙*/
font-size: 0;
/*去掉ul自帶的.格式*/
list-style: none; padding: 0; } .menu li{
/*將元素轉換為行內塊元素*/
display:inline-block; width:98px; height:48px; border:1px solid gold; font-size:16px;
/*將邊框合並*/
margin-right:-1px; text-align:center; line-height:48px; } .menu a{ font-family: "Microsoft YaHei UI"; color:pink;
/*去掉a元素的下划線*/
text-decoration: none; }
/*鼠標位於元素位置時改變元素樣式*/
.menu li:hover{ background-color: orange; } .menu a:hover{ color:#fff; } </style> </head> <body> <ul class="menu"> <li><a href="">首頁</a></li> <li><a href="">公司簡介</a></li> <li><a href="">解決方案</a></li> <li><a href="">公司新聞</a></li> <li><a href="">行業動態</a></li> <li><a href="">招賢納才</a></li> <li><a href="">聯系我們</a></li> </ul> </body> </html>
效果圖：
