效果图：
代码如下：
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 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
5 <title>无标题文档</title>
6 <style>
7 body,ul,h2,h3,p{margin:0;padding:0; font-family:"宋体";}
8 li{ list-style:none;}
9 img{ border:none; vertical-align:top;}
10 a{ text-decoration:none;}
11 .wrap{width:366px; margin:30px auto;}
12 .head{background:url(headBg.gif) no-repeat; height:37px;}
13 .title{font-size:12px; line-height:22px; color:#294852; background:url(pic4.png) no-repeat 6px 4px; padding-left:30px;}
14 .list{ padding:0px 7px 2px 5px;}
15 .clear{zoom:1;}
16 .clear:after{content:""; display:block; clear:both;}
17 .list .li{vertical-align:top; padding:12px 0 9px 0;}
18 .list .pic{width:95px; height:60px; float:left;border:1px solid #c8c4d3;padding:2px;background:#fff;}
19 .list .text{ width:239px; float:right;}
20 .list .text h3{font-size:12px; line-height:24px;}
21 .list .text p{font-size:12px; line-height:20px; color:#666666;}
22 .list .text a{color:#666666;}
23 </style>
24 </head>
25 <div class="wrap">
26 <div class="head">
27 <h2 class="title">外媒评论精选</h2>
28 </div>
29 <ul class="list clear">
30 <li class="li clear">
31 <a href="#" class="pic">
32 <img src="pic1.png" />
33 </a>
34 <div class="text">
35 <h3>《加勒比海盗4》--商业味浓郁</h3>
36 <p>本集《加勒比海盗》讲述了杰克船长受英王所托“不老泉”，与他...[<a href="#">详细</a>]</p>
37 </div>
38 </li>
39 <li class="li clear">
40 <a href="#" class="pic">
41 <img src="pic2.png" />
42 </a>
43 <div class="text">
44 <h3>《加勒比海盗4》--商业味浓郁</h3>
45 <p>本集《加勒比海盗》讲述了杰克船长受英王所托“不老泉”，与他...[<a href="#">详细</a>]</p>
46 </div>
47 </li>
48 <li class="li clear">
49 <a href="#" class="pic">
50 <img src="pic3.png" />
51 </a>
52 <div class="text">
53 <h3>《源代码》--科幻与惊悚完美结合</h3>
54 <p>《源代码》杰克杰伦哈米歇尔莫纳汉、维拉法梅加主演。...[<a href="#">详细</a>]</p>
55 </div>
56 </li>
57 </ul>
58 </div>
59 <body>
60 </body>
61 </html>
时间： 2024-08-10 21:28:50