效果图：

源代码：

<!DOCTYPE html>
<html>
<head>
<style>
    div.box{
        width:800px;
        height:300px;
        border:deeppink 3px dashed;
        border-radius:30px;
        background-color:mediumturquoise;
        margin-top:100px;
        margin-left:250px;
    }
div.gallery {
  margin: 5px;
  border: 1px solid #ccc;
  float: left;
  width: 180px;
}

div.gallery:hover {
  border: 1px solid #777;
}

div.gallery img {
  width: 100%;
  height: auto;
}

div.desc {
  padding: 15px;
  text-align: center;
}
</style>
</head>
<body>
<div class="box">
<div class="gallery">
    <a target="_blank" href="https://www.baidu.com/link?url=KJbcuxTk_lJZm33HdOwKrg2Jg2MJg6gXdWE2Quwe6-7Tl9vbTd3_6tyf08hDtsVidzAuwxLWjUkR9bfileIkeembFBgDPcWBUR_YO3oPfa1vA6PimWV3REnck5S6-AM61_KH9LBdt1gSj8_RmnLd5-fHo-VRXEiyhnTg5ppIYQPpmItSRwLk98DneP48csmszmrG0bQBSnA-qK2In0H6-eQeCxaBwPiH4yuuXfRPmRLEzkmnDHI8geD_NNiW_u1R&click_t=1622433596013&s_info=1263_660&wd=&eqid=eb81931a000008620000000360b45f37">
      <img src="images/flower-1.jpg" alt="Cinque Terre" width="600" height="400">
    </a>
    <div class="desc">花花草草</div>
  </div>
  
  <div class="gallery">
    <a target="_blank" href="https://www.baidu.com/link?url=KJbcuxTk_lJZm33HdOwKrg2Jg2MJg6gXdWE2Quwe6-7Tl9vbTd3_6tyf08hDtsVidzAuwxLWjUkR9bfileIkeembFBgDPcWBUR_YO3oPfa1vA6PimWV3REnck5S6-AM61_KH9LBdt1gSj8_RmnLd5-fHo-VRXEiyhnTg5ppIYQPpmItSRwLk98DneP48csmszmrG0bQBSnA-qK2In0H6-eQeCxaBwPiH4yuuXfRPmRLEzkmnDHI8geD_NNiW_u1R&click_t=1622433596013&s_info=1263_660&wd=&eqid=eb81931a000008620000000360b45f37">
      <img src="images/flower-2.jpg" alt="Forest" width="600" height="400">
    </a>
    <div class="desc">花花草草</div>
  </div>
  
  <div class="gallery">
    <a target="_blank" href="https://www.baidu.com/link?url=hDLr_7jI5Jj6SD0tCCGgnpkSKu_u5ejxKr4tUPNXPLfM_qE0sx-hy-5Gpw-kPBIMjL7qO2buC8j2JThs1YsUjtQ98Lqay4Gida5ZZgCECpG04-oUQ0YPm352UOCMyWknWA1pK5vAc51gW4kPD5UrKf5kzvJkk3OTo2lNmUvmDSHKqNB1nqoQZhuongo8RWebXaUtA0EXWDJoqZWed71LgnI5QeU41tGJ-KiStdbCEsCh5ftWYQjBXWOSmLZTgCMs&click_t=1622433409093&s_info=1263_660&wd=&eqid=b5d0f41000003f7c0000000360b45e7d">
      <img src="images/flower-3.jpg" alt="Northern Lights" width="600" height="400">
    </a>
    <div class="desc">红色郁金香</div>
  </div>
  
  <div class="gallery">
    <a target="_blank" href="https://www.baidu.com/link?url=Bm_ASbzcX8dbNgIUnBOxZ2nbfQVXKnBWbt0DCA-1jP75cvblUJTuRolKxw6cKZ4CjfG-vPG6_SbdGEDaao2E0wo3PIvF1gN_zc4nKh_xqYXN_IosYNTzTJlQTzJJsMIpMFgo4WN5pkU8TmqvhJtzxMWyvte4NEGPB6aP3AAXTbdX0ooHAhIwuih4KRjTJzBeTuU7QsNlSqXNICjHxdhSLuDtj4dQb-EGa-KdlSchz3CUsuHtTd4ZCJTqiWnUmRoD&click_t=1622433545002&s_info=1263_660&wd=&eqid=f084bbd900003e1b0000000360b45f03">
      <img src="images/flower-4.jpg" alt="Mountains" width="600" height="400">
    </a>
    <div class="desc">黄色郁金香</div>
  </div>
</div>
</body>
</html>

再附上一张原图

 

Logo
华为开发者空间

华为开发者空间，是为全球开发者打造的专属开发空间，汇聚了华为优质开发资源及工具，致力于让每一位开发者拥有一台云主机，基于华为根生态开发、创新。

更多推荐

cover

GaussDB Ustore存储引擎解读

avatar 华为开发者空间

如何在鲲鹏平台上快速上手应用开发？鲲鹏DevKit给你答案

鲲鹏DevKit针对不同的业务场景，提供了应用迁移和系统迁移两套解决方案，帮忙开发者快速从X86平台迁移至鲲鹏平台，通过详细的迁移建议降低迁移门槛，可视化展示迁移进度，打消鲲鹏平台开发的顾虑。

avatar 华为开发者空间
cover

华为云开源项目Sermant正式成为CNCF官方项目

avatar 华为开发者空间