简单的一个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