html/css小练习3 - 保卫萝卜

效果图：
代码：
 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>
View Code
需要的img:
posted on 2016-09-07 20:02 保卫萝卜阅读(148) 评论(0) 收藏举报
刷新页面返回顶部