1 <!DOCTYPE html>
2 <html lang="en">
3 <head>
4 <meta charset="UTF-8">
5 <title>考试</title>
6 <style type="text/css">
7 *{
8 margin:0;
9 padding: 0;
10 }
11 .main{
12 width: 320px;
13 height: 300px;
14 margin:100px auto;
15 }
16 .nav{
17 height: 20px;
18 border-bottom: 3px solid #c2130e;
19 }
20 .nav h6{
21 width: 90px;
22 line-height: 20px;
23 float: left;
24 text-align: center;
25 }
26 .nav ul li{
27 list-style: none;
28 width: 45px;
29 line-height: 20px;
30 float: left;
31 font-size: 8px;
32 text-align: center;
33 margin-left: 5px;
34 }
35 .nav ul li a{
36 text-decoration: none;
37 color: #000;
38 background-color: #dcdcdc;
39 display: block;
40 }
41 .nav ul li a.first{
42 background-color: #c2130e;
43 color: #fff;
44 }
45 .nav ul li a:hover{
46 background-color: #c2130e;
47 color: #fff;
48 }
49 .clear{
50 clear: both;
51 }
52 .list ul{
53 background: url(bg.gif) no-repeat 11px 12px;
54 padding-top: 11px;
55 }
56 .list ul li{
57 list-style: none;
58 font-size: 10px;
59 padding-left: 39px;
60 height: 26px;
61 }
62 .list ul li a{
63 text-decoration: none;
64 color:#cacaca;
65 }
66 .list ul li a:hover{
67 text-decoration:underline;
68 color:#c2130e;
69 }
70 </style>
71 </head>
72 <body>
73 <div class="main">
74 <div class="nav">
75 <h6>新闻排行</h6>
76 <ul>
77 <li><a href="#" class="first">国内</a></li>
78 <li><a href="#">国际</a></li>
79 <li><a href="#">社会</a></li>
80 <li><a href="#">网评</a></li>
81 </ul>
82 </div>
83 <div class="clear"></div>
84 <div class="list">
85 <ul>
86 <li><a href="#">新疆阜康铁路桥梁坍塌多节运煤车厢侧翻坠河</a></li>
87 <li><a href="#">新疆阜康铁路桥梁坍塌多节运煤车厢侧翻坠河</a></li>
88 <li><a href="#">新疆阜康铁路桥梁坍塌多节运煤车厢侧翻坠河</a></li>
89 <li><a href="#">新疆阜康铁路桥梁坍塌多节运煤车厢侧翻坠河</a></li>
90 <li><a href="#">新疆阜康铁路桥梁坍塌多节运煤车厢侧翻坠河</a></li>
91 <li><a href="#">新疆阜康铁路桥梁坍塌多节运煤车厢侧翻坠河</a></li>
92 <li><a href="#">新疆阜康铁路桥梁坍塌多节运煤车厢侧翻坠河</a></li>
93 <li><a href="#">新疆阜康铁路桥梁坍塌多节运煤车厢侧翻坠河</a></li>
94 <li><a href="#">新疆阜康铁路桥梁坍塌多节运煤车厢侧翻坠河</a></li>
95 <li><a href="#">新疆阜康铁路桥梁坍塌多节运煤车厢侧翻坠河</a></li>
96 </ul>
97 </div>
98 </div>
99 </body>
100 </html>