實踐課__浮動練習7

時間 2019-11-30
標籤實踐浮動練習简体版
原文原文鏈接
 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>
View Code
相關標籤/搜索
每日一句
每一个你不满意的现在，都有一个你没有努力的曾经。