简单的一个CSS菜单，不用图片也很好看

简单的一个CSS菜单，不用图片也很好看_网页代码站(www.webdm.cn)

 1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
 2 <html xmlns="http://www.w3.org/1999/xhtml">
 3 <head>
 4 <title>简单的一个CSS菜单，不用图片也很好看_网页代码站(www.webdm.cn)</title>
 5 <style>
 6 *{ margin:0; padding:0; list-style:none; font-size:12px;}
 7 body{ padding:100px; text-align:center; }
 8 #header { margin: 0 auto 10px; width: 800px; height: 60px; }
 9 #header ul { border-bottom: 1px solid #999; display: table; width: 100%; height: 26px; }
10 #header ul li { float: left; text-align:center; display: inline; margin-left: 20px; background: #ccc; padding: 0 20px; line-height: 24px; border: 
11 
12 1px solid #999; position: relative; bottom: -1px; }
13 #header ul .active { background: #FFF; border-bottom: 1px solid #FFF; position: relative; }
14 </style>
15 </head>
16 <body>
17 <div id="header">
18    <ul>
19    <li class="active">新闻</li>
20        <li>科技</li>
21        <li>手机</li>
22        <li>娱乐</li>    
23    </ul>
24 </div>
25 </body>
26 </html>
27 <br>
28 <p>
29 <a href="http://www.webdm.cn">网页代码站</a> - 最专业的代码下载网站 - 致力为中国站长提供有质量的代码！</p>

文章来自：http://www.webdm.cn/webcode/4a819ee7-b024-41dc-b3da-481e583062f5.html