<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> * { padding: 0; margin: 0; } /*设置nav的大小*/ .nav{ width:1205px; height:48px; background-color:rgb(232,231,227); margin:100px auto; } .nav li{ list-style:none; } /*设置li*/ .nav li{ float:left; height:100%; line-height:48px;/*文字垂直居中*/ } .nav a{ text-decoration: none; color:#777; font-size:18px; display:block; padding:0 39px; } .nav a:hover{ background-color: #3f3f3f; color:#E8E7E3; } </style> </head> <body> <!--创建导航条结构--> <ul class="nav"> <li> <a href="#">HTML/CSS</a> </li> <li> <a href="#">Browser Side</a> </li> <li> <a href="#">Server Side</a> </li> <li> <a href="#">Programming</a> </li> <li> <a href="#">XML</a> </li> <li> <a href="#">Web Building</a> </li> <li> <a href="#">Reference</a> </li> </ul> </body> </html>