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" xml:lang="en">
  3 <head>
  4     <meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
  5     <title>新闻排行</title>
  6     <style>
  7     *{margin: 0;padding: 0;}
  8     li{list-style: none;}
  9     body{font-family: 微软雅黑;}
 10     .box{
 11         height: 300px;
 12         width: 470px;
 13         margin: 100px auto;
 14         background-color: #fff;
 15     }
 16     /*顶部导航栏*/
 17     .box .header{
 18         width: 100%;
 19         height: 32px;
 20         line-height: 32px;
 21         background-color: #fff;
 22         border-bottom: 5px solid red;/*设置导航栏下的红线*/
 23     }
 24     .box .header ul li{
 25         float: left;
 26         width: 45px;
 27         padding-left: 15px;
 28         padding-right: 15px;
 29         text-align: center;
 30         background-color: #ccc;
 31         border-left: 2px solid #F1F1F1;/*设置导航栏左边边框线*/
 32     }
 33     .box .header ul li a:link,.box .header ul li a:visited{
 34         text-decoration: none;
 35     }
 36     .box .header ul li a:hover{
 37         color: gold;
 38     }
 39     .box .header .news{
 40         width: 80px;
 41         padding-left: 30px;
 42         padding-right: 20px;
 43         text-align: center;
 44         border: none;
 45         background-color: #fff;    
 46         font-weight: bold;
 47     }
 48     .box .header .guonei{
 49         background-color: #f00;/*设置国内两个字的背景颜色*/
 50         border-right: 1px solid #F1F1F1;
 51     }
 52     .box .header .guonei a:link,.box .header .guonei a:visited{
 53         text-decoration: none;
 54         color: #fff;
 55     }
 56     .box .header .guonei a:hover{
 57         color:gold;
 58     }
 59     /*新闻版块*/
 60     .box .content{
 61         color: #C3C3C3;/*设置新闻区域文本颜色*/
 62     }
 63     .box .content ul{
 64         padding-left: 50px;
 65         width: 100%;
 66         height: 260px;
 67         background: url(bg.gif) no-repeat 20px 5px;/*设置列表前面的图片*/
 68     }
 69     .box .content ul a:link,.box .content ul a:visited{
 70         text-decoration:none;
 71         color: #C3C3C3;
 72     }
 73     .box .content ul a:hover{
 74         color: #333;
 75     }
 76     .box .content ul li{
 77         margin-top: 3px;
 78         height: 23px;
 79         line-height: 23x;
 80     }
 81     </style>
 82 </head>
 83 <body>
 84     <div class="box">
 85         <div class="header">
 86             <ul>
 87                 <li class="news"><a href="#">新闻排行</a></li>
 88                 <li class="guonei"><a href="#">国内</a></li>
 89                 <li><a href="#">国际</a></li>
 90                 <li><a href="#">社会</a></li>
 91                 <li><a href="#">网评</a></li>
 92             </ul>
 93         </div>
 94         <div style="clear: both;"></div>
 95         <div class="content">
 96             <ul>
 97                 <li><a href="#">美军高官:不排除和中国发生直接军事对抗可能会输.....</a></li>
 98                 <li><a href="#">美军高官:不排除和中国发生直接军事对抗可能会输.....</a></li>
 99                 <li><a href="#">美军高官:不排除和中国发生直接军事对抗可能会输.....</a></li>
100                 <li><a href="#">美军高官:不排除和中国发生直接军事对抗可能会输.....</a></li>
101                 <li><a href="#">美军高官:不排除和中国发生直接军事对抗可能会输.....</a></li>
102                 <li><a href="#">美军高官:不排除和中国发生直接军事对抗可能会输.....</a></li>
103                 <li><a href="#">美军高官:不排除和中国发生直接军事对抗可能会输.....</a></li>
104                 <li><a href="#">美军高官:不排除和中国发生直接军事对抗可能会输.....</a></li>
105                 <li><a href="#">美军高官:不排除和中国发生直接军事对抗可能会输.....</a></li>
106                 <li><a href="#">美军高官:不排除和中国发生直接军事对抗可能会输.....</a></li>
107             </ul>
108         </div>
109     </div>
110 </body>
111 </html>