HTML5--经典案例：摄影社区热门小镇(学生版)_摄影社区热门小镇代码-CSDN博客

本文链接：https://blog.csdn.net/2201_75742255/article/details/138769463

实现效果：

代码如下：

<!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>