一个简洁的导航栏却需要很大的技巧 

 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>

 

posted @ 2016-07-26 16:39  Blue-Beginner  阅读(158)  评论(0)    收藏  举报