一个简洁的导航栏却需要很大的技巧
1 DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="UTF-8"> 5 <title>ZHOULIANG.protfolio</title> 6 <style type="text/css"> 7 *{margin:0;padding:0;} 8 #lead{height:50px;background:#707070;} 9 #lead p{padding:14px 0 0 25px;font-weight:bold;font-size:20px;color: white;} 10 #lead-p{width:150px;height:50px;float:left;margin-left:200px;background:#505050;} 11 #lead ul{margin: 0;padding: 0;overflow: hidden;width:425px;margin-left:1200px;background:#505050;} 12 #lead ul li{float: left;list-style: none;} 13 #lead ul li a{font-size:25px;text-decoration: none;display: block;text-align: center;padding-top: 10px;height: 40px;color: ghostwhite;} 14 #lead ul li a:hover{background:#303030;} 15 </style> 16 </head> 17 <body> 18 <div id="lead"> 19 <div id="lead-p"> 20 <p>ZHOULIANG</p> 21 </div> 22 <ul> 23 <li><a href="" style="width:85px;">Home</a></li> 24 <li><a href="" style="width:90px;">About</a></li> 25 <li><a href="" style="width:140px;">Protfolio</a></li> 26 <li><a href="" style="width:110px;">Contact</a></li> 27 </ul> 28 </div> 29 </body> 30 </html>