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

代码：
 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,dl,dd{margin:0;padding:0; font-family:"宋体";}
 8 li{ list-style:none;}
 9 a{ text-decoration:none;color:#4f6c84;}
10 img{ border:none; vertical-align:top;}
11 .clear{zoom:1;}
12 .clear:after{ content:"";display:block;clear:both;}
13 .wrap{width:445px;margin:30px auto;padding:12px 8px 0 7px; background:url(img/bg.gif) no-repeat 220px 0;}
14 .left{width:212px;float:left;}
15 .leftTop .pic{width:124px; background:url(pic5.png) no-repeat right 0;
16 padding-right:5px;float:left;}
17 .leftTop .pic a{border:1px solid #72B6F3; display:block; float:left; padding:3px;}
18 .leftTop dl{float:left; width:60px; padding-left:5px; font-size:12px; line-height:20px;
19 color:#B7CBF9;}
20 .leftBottom{padding-top:10px;}
21 .leftBottom li{font-size:12px; line-height:20px; padding-left:10px;
22 background:url(pic6.png) no-repeat 0 7px; }
23 .right{width:220px; float:right;}
24 .right li{width:100px; float:left;padding-left:10px;}
25 
26 .right li a{ display:block;}
27 .right li img{border:1px solid #36C; padding:3px;}
28 .right strong{display:block; font-size:12px; line-height:24px; padding-top:3px; font:normal; text-align:center;}
29 </style>
30 </head>
31 
32 <body>
33 <div class="wrap clear">
34     <div class="left">
35         <div class="leftTop clear">
36             <div class="pic">
37                 <a href="#">
38                     <img src="pic-1.png" />
39                 </a>
40             </div>
41             <dl>
42                 <dt><a href="#">潜伏</a></dt>
43                 <dd>导演：姜伟</dd>
44                 <dd>主演：姚晨 孙红雷</dd>
45             </dl>
46         </div>
47         <ul class="leftBottom">
48             <li><a href="#">海清张嘉译演绎房奴生活《蜗居》</a></li>
49             <li>
50                 <a href="#">琼瑶经典言情剧集锦</a>
51                 <a href="#">梦露电影知多少</a>
52             </li>
53         </ul>
54     </div>
55     <ul class="right">
56         <li>
57             <a href="#">
58                 <img src="pic-2.png" />
59                 <strong>将爱情进行到底</strong>
60             </a>
61         </li>
62         <li>
63             <a href="#">
64                 <img src="pic-3.png" />
65                 <strong>将爱情进行到底</strong>
66             </a>
67         </li>
68     </ul>
69 </div>
70 
71 
72 </body>
73 </html>
View Code
posted on 2016-09-06 17:55 保卫萝卜阅读(181) 评论(0) 收藏举报
刷新页面返回顶部