1 <!DOCTYPE html>
2 <html>
3 <head>
4 <meta charset="UTF-8">
5 <title></title>
6 <style>
7 *{
8 margin: 0;
9 padding: 0;
10 }
11 a{
12 text-decoration: none;
13 }
14
15 /*大体div*/
16 .big{
17 width: 300px;
18 height: 310px;
19 margin: 100px auto;
20 }
21 /*顶部*/
22 .top{
23 text-align: center;
24 height: 25px;
25 line-height: 25px;
26 border-bottom: 2px solid darkred;
27 }
28 h4{
29 float: left;
30 width: 90px;
31 }
32 .top a{
33 float: left;
34 width: 50px;
35 color: black;
36 display: block;
37 margin-left: 2px;
38 font-size: 14px;
39 background-color: gainsboro;
40 }
41 .top a:hover{
42 background-color: darkred;
43 color: white;
44 }
45
46 /*news 新闻*/
47 .new{
48 height: 280px;
49 }
50 .new ul{
51 background: url(bg.gif) no-repeat 5px 9px;
52 padding-left: 28px;
53 }
54 .new li{
55 font-size: 13px;
56 list-style: none;
57 line-height:29px;
58 }
59 .new li a{
60 color: gray;
61 display: block;
62 width:270px;
63 height:29px ;
64 }
65 .new li a:hover{
66 color: #8B0000;
67 color: white;
68 background-color:darkred ;
69 }
70 /*more 更多*/
71 p{
72 text-align: right;
73 font-size: 13px;
74 }
75 p a{
76 color: gray;
77 }
78 </style>
79 </head>
80 <body>
81 <div class="big">
82 <div class="top">
83 <h4>新闻排行</h4><a href="#">国内</a><a href="#">国内</a><a href="#">国内</a><a href="#">国内</a>
84 </div>
85 <div class="new">
86 <ul>
87 <li><a href="#">广州传智播客php基础班23期 312室</a></li>
88 <li><a href="#">广州传智播客php基础班23期 312室</a></li>
89 <li><a href="#">广州传智播客php基础班23期 312室</a></li>
90 <li><a href="#">广州传智播客php基础班23期 312室</a></li>
91 <li><a href="#">广州传智播客php基础班23期 312室</a></li>
92 <li><a href="#">广州传智播客php基础班23期 312室</a></li>
93 <li><a href="#">广州传智播客php基础班23期 312室</a></li>
94 <li><a href="#">广州传智播客php基础班23期 312室</a></li>
95 <li><a href="#">广州传智播客php基础班23期 312室</a></li>
96 </ul>
97 </div>
98 <p><a href="#">...more</a></p>
99 </div>
100 </body>
101 </html>
时间： 2024-12-28 15:02:57