首页 > Web开发 > 详细

html/css小练习2

时间:2016-09-07 09:08:23      阅读:204      评论:0      收藏:0      [点我收藏+]

效果图:

技术分享

代码如下:

技术分享
 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>
View Code

 

html/css小练习2

原文:http://www.cnblogs.com/baoweiluobo/p/5848106.html

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!