效果图：
代码如下：
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>
原文：http://www.cnblogs.com/baoweiluobo/p/5848106.html
