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>
时间： 2024-10-26 18:27:26