标签：
效果图：
代码：
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 {margin:0;padding:0;} 8 a{text-decoration:none;} 9 li{list-style:none;} 10 img{border:none; vertical-align:top;} 11 .clear{zoom:1;} 12 .clear:after{content:""; display:block; clear:both;} 13 .wrap{width:378px;padding-top:11px;background:#f4fafb; margin:30px auto;} 14 .head{background:url(headBg.gif) no-repeat ; height:26px;} 15 .title{background:url(pic4.png) no-repeat 10px 6px; font-size:12px; 16 line-height:24px; padding-left:30px;} 17 .picList{padding-top:15px;} 18 .picList li{width:91px;padding-right:17px; margin:0 8px; float:left; display:inline;background:url(pic5.png) no-repeat right 18px;} 19 .picList img{border:1px solid #666; padding:2px;} 20 .picList b{font-size:12px; line-height:30px; text-align:center; font-style:normal;display:block; color:#333;} 21 .text{padding:0 27px; font-size:12px; line-height:22px;} 22 .text li{background:url(pic6.png) no-repeat 0 10px; text-indent:14px;} 23 </style> 24 </head> 25 <div class="wrap"> 26 <div class="head"> 27 <h2 class="title">华语谍报</h2> 28 </div> 29 30 <ul class="picList clear"> 31 <li> 32 <a href="#"> 33 <img src="pic1.png" /> 34 <b>大叔</b> 35 </a> 36 </li> 37 <li> 38 <a href="#"> 39 <img src="pic2.png" /> 40 <b>我知女人心</b> 41 </a> 42 </li> 43 <li> 44 <a href="#"> 45 <img src="pic3.png" /> 46 <b>十三人刺客</b> 47 </a> 48 </li> 49 </ul> 50 51 52 53 <ul class="text"> 54 <li>化妆，还是伪装？港三区美亚版《最强囍事》</li> 55 <li>阴间猛鬼斗阳间小三--港三区千绩版《恶胎》</li> 56 <li>孤寂的爱情心事--《征婚启事》碟评</li> 57 58 </ul> 59 60 </div> 61 <body> 62 </body> 63 </html>
需要的img:
标签：
原文地址：http://www.cnblogs.com/baoweiluobo/p/5850796.html
