首页 > 代码库 > html/css小练习2
html/css小练习2
效果图：
代码如下：
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>
html/css小练习2
声明：以上内容来自用户投稿及互联网公开渠道收集整理发布，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任，若内容有误或涉及侵权可进行投诉： 投诉/举报 工作人员会在5个工作日内联系你，一经查实，本站将立刻删除涉嫌侵权内容。