首页 > 代码库 > 实践课__浮动练习7
实践课__浮动练习7
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="UTF-8"> 5 <title>虾米</title> 6 <style type="text/css"> 7 body{background-color:#c3c3c3;} 8 body, h2{margin:0; padding:0;} 9 ul, li, p{margin:0; padding:0;}10 li{list-style:none;}11 img{border:none; vertical-align:top;}12 a{text-decoration:none;}13 14 .box{width:640px; height:273px; background-color:#fff; margin:30px auto; padding:12px 12px 12px 7px;}15 .header{width:640px; height:30px; border-bottom:1px solid #c7c7c7;} 16 .header h2{font-size:14px; line-height:30px; font-family:"宋体"; display:inline-block; float:left;}17 .header span{font-size:12px; color:#7e7e7e; float:right; line-height:30px; margin-right:12px;}18 .list li{width:640px; height:100px; border-bottom:1px solid #e5e5e5; padding:10px 0;}19 .list li img{width:100px; height:100px; padding-right:10px; float:left;}20 .desc{display:inline-block; width:530px; float:left; overflow:hidden; height:100px;}21 22 .desctitle{height:22px;}23 .desc .desctitle h2{font-size:14px; color:#3f6acc; line-height:22px; display:inline-block; float:left;}24 .desc .desctitle img{width:17px; height:15px; float:left; padding:4px 0 0 5px;}25 26 .desc p{font-size:12px; color:#b29999; padding-top:10px;}27 .desc p .active{color:#8ca6d7;}28 .desc span{font-size:12px;}29 30 .clearfix{zoom:1;}31 .clearfix:after{content:""; display:block; clear:both;}32 </style>33 </head>34 <body>35 <div class="box">36 <div class="header"> 37 <h2>最新原创精选集</h2>38 <span>更多</span>39 </div>40 <ul class="list">41 <li>42 <img src="title_pic.gif" />43 <div class="desc clearfix">44 <div class="desctitle clearfix">45 <a href="#"><h2>挂满回忆的绿树摇曳 承载青春的台湾(34)</h2> <img src="title_play.gif"/></a> 46 </div>47 <p>制作人: <span class="active">柔清梦</span> @2012-11-02</p>48 <span>有人定义"民谣"有两种含义,有人定义"民谣"有两种含义,有人定义"民谣"有两种含义,有人定义"民谣"有两种含义,有人定义"民谣"有两种含义,有人定义"民谣"有两种含义,有人定义"民谣"有两种含义,有人定义"民谣"有两种含义,有人定义"民谣"有两种含义,有人定义"民谣"有两种含义,有人定义"民谣"有两种含义,有人定义"民谣"有两种含义,有人定义"民谣"有两种含义,</span>49 </div>50 </li>51 <li>52 <img src="title_pic.gif" />53 <div class="desc clearfix">54 <div class="desctitle clearfix">55 <a href="#"><h2>挂满回忆的绿树摇曳 承载青春的台湾(34)</h2> <img src="title_play.gif"/></a> 56 </div>57 <p>制作人: <span class="active">柔清梦</span> @2012-11-02</p>58 <span>有人定义"民谣"有两种含义,有人定义"民谣"有两种含义,有人定义"民谣"有两种含义,有人定义"民谣"有两种含义,有人定义"民谣"有两种含义,有人定义"民谣"有两种含义,有人定义"民谣"有两种含义,有人定义"民谣"有两种含义,有人定义"民谣"有两种含义,有人定义"民谣"有两种含义,有人定义"民谣"有两种含义,有人定义"民谣"有两种含义,有人定义"民谣"有两种含义,</span>59 </div>60 </li>61 </ul>62 </div>63 </body>64 </html>
实践课__浮动练习7
声明：以上内容来自用户投稿及互联网公开渠道收集整理发布，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任，若内容有误或涉及侵权可进行投诉： 投诉/举报 工作人员会在5个工作日内联系你，一经查实，本站将立刻删除涉嫌侵权内容。