实现效果：
代码如下：
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>热门小镇</title>
<style type="text/css">
*{
margin: 20px;
}
.box{
border: solid 1px grey;
width: 1000px;
padding: 0px;
height: 380px;
}
.box01{
margin: 0px;
width: 100px;
float: left;
padding: 0px;
margin: 10px;
height: 130px;
}
.box02{
margin: 15px 50px 0px 0px;
padding: 20px 0px 0px 0px;
float: left;
width: 160px;
height: 130px;
line-height: 10px;
}
img{
border: 1px solid #AEAEAE;
border-radius: 8px;
padding: 5px;
width: 80px;
}
div>span{
margin: 10px 0px 0px 20px;
font-size: 18px;
color: #2E75BC;
}
span:hover{
color: red;
}
</style>
</head>
<body>
<div class="box">
<h2>摄影社区热门小镇</h2>
<div class="box01"><img src="图片素材/pic_01.jpg"></div>
<div class="box02"><span>风景狙击手</span><p>成员：80</p><p>作品：276</p></div>
<div class="box01"><img src="图片素材/pic_02.jpg"></div>
<div class="box02"><span>叙事感</span><p>成员：235</p><p>作品：116</p></div>
<div class="box01"><img src="图片素材/pic_03.jpg"></div>
<div class="box02"><span>定焦视界</span><p>成员：56</p><p>作品：456</p></div>
<div class="box01"><img src="图片素材/pic_04.jpg"></div>
<div class="box02"><span>中画幅乐园</span><p>成员：130</p><p>作品：239</p></div>
<div class="box01"><img src="图片素材/pic_05.jpg"></div>
<div class="box02"><span>《卡啪》先锋...</span><p>成员：78</p><p>作品：125</p></div>
<div class="box01"><img src="图片素材/pic_06.jpg"></div>
<div class="box02"><span>植物的无声世界</span><p>成员：235</p><p>作品：1258</p></div>
</div>
</body>
</html>
