1 <!DOCTYPE html> 2 <html> 3 <head lang="en"> 4 <meta charset="UTF-8"> 5 <title>摄影社区热门小镇</title> 6 <style> 7 body{ 8 width:760px; 9 height: 230px; 10 margin: 50px auto; 11 border:1px #A4FFF3 solid; 12 } 13 .title{ 14 color:#656565; 15 font-size: 14px; 16 font-weight: bold; 17 width:120px; 18 margin: 10px; 19 } 20 li{ 21 list-style: none; 22 width:240px; 23 float: left; 24 margin-top: 10px; 25 } 26 span{ 27 border:1px #A4FFF3 solid; 28 float: left; 29 border-radius: 4px; 30 padding: 3px 3px 0; 31 } 32 p{ 33 float: left; 34 margin-top: 0; 35 margin-left: 10px; 36 color:grey; 37 font-size: 13px; 38 line-height: 20px; 39 } 40 a{ 41 color:deepskyblue; 42 text-decoration: none; 43 font-size: 14px; 44 line-height: 27px; 45 } 46 a:hover{ 47 text-decoration: none; 48 color:red; 49 } 50 </style> 51 </head> 52 <body> 53 <div class="title">摄影社区热门小镇</div> 54 <div class="content"> 55 <ul> 56 <li> 57 <span><img src="image/pic_01.jpg"/></span> 58 <p> 59 <a href="">风景狙击手</a><br/> 60 成员：80<br/> 61 作品：276 62 </p> 63 </li> 64 <li> 65 <span><img src="image/pic_02.jpg"/></span> 66 <p> 67 <a href="">叙事感</a><br/> 68 成员：235<br/> 69 作品：116</p> 70 </li> 71 <li> 72 <span><img src="image/pic_03.jpg"/></span> 73 <p> 74 <a href="">定焦视界</a><br/> 75 成员：56<br/> 76 作品：456 77 </p> 78 </li> 79 <li> 80 <span><img src="image/pic_04.jpg"/></span> 81 <p> 82 <a href="">中画幅乐园</a><br/> 83 成员：130<br/> 84 作品：239 85 </p> 86 </li> 87 <li> 88 <span><img src="image/pic_05.jpg"/></span> 89 <p> 90 <a href="">《卡啪》先锋...</a><br/> 91 成员：78<br/> 92 作品：125 93 </p> 94 </li> 95 <li> 96 <span><img src="image/pic_06.jpg"/></span> 97 <p> 98 <a href="">植物的无声世界</a><br/> 99 成员：235<br/> 100 作品：1258 101 </p> 102 </li> 103 </ul> 104 </div> 105 </body> 106 </html>