文字放在图片的下面 web前端网页布局

最新推荐文章于 2023-06-19 09:07:48 发布

Pink&Sakura

最新推荐文章于 2023-06-19 09:07:48 发布

阅读量1w

点赞数 8

分类专栏： Web前端

本文链接：https://blog.csdn.net/galaxyrt/article/details/117413928

版权

Web前端专栏收录该内容

23 篇文章 6 订阅

订阅专栏

效果图：

源代码：

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

再附上一张原图