<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<style>
* {
margin: 0;
padding: 0;
}
body {
background: rgb(58, 67, 76);
background: url(../img/a.png), url(../img/bg.gif) rgb(58, 67, 76);
}
.box {
column-count: 5;
column-gap: 0;
padding: 0 50px;
}
figure {
border: 2px solid pink;
padding: 5px;
break-inside: avoid;
color: rgb(255, 192, 203);
text-align: center;
font-size: 20px;
margin: 0 5px 5px;
}
img {
width: 100%;
}
</style>
</head>
<body>
<div class="box">
<audio
src="../audio/zhoujie.mp3"
controls="controls"
autoplay="autoplay"
></audio>
<figure>
<img src="../img/1.jpg" alt="" />
<figcaption>往后余生,平淡是你</figcaption>
</figure>
<figure>
<img src="../img/2.jpg" alt="" />
<figcaption>往后余生,平淡是你</figcaption>
</figure>
<figure>
<img src="../img/3.jpg" alt="" />
<figcaption>往后余生,平淡是你</figcaption>
</figure>
<figure>
<img src="../img/4.jpg" alt="" />
<figcaption>往后余生,平淡是你</figcaption>
</figure>
<figure>
<img src="../img/5.jpg" alt="" />
<figcaption>往后余生,平淡是你</figcaption>
</figure>
<figure>
<img src="../img/6.jpg" alt="" />
<figcaption>往后余生,平淡是你</figcaption>
</figure>
<figure>
<img src="../img/7.jpg" alt="" />
<figcaption>往后余生,平淡是你</figcaption>
</figure>
<figure>
<img src="../img/8.jpg" alt="" />
<figcaption>往后余生,平淡是你</figcaption>
</figure>
<figure>
<img src="../img/9.jpg" alt="" />
<figcaption>往后余生,平淡是你</figcaption>
</figure>
<figure>
<img src="../img/10.jpg" alt="" />
<figcaption>往后余生,平淡是你</figcaption>
</figure>
<figure>
<img src="../img/11.jpg" alt="" />
<figcaption>往后余生,平淡是你</figcaption>
</figure>
<figure>
<img src="../img/12.jpg" alt="" />
<figcaption>往后余生,平淡是你</figcaption>
</figure>
<figure>
<img src="../img/13.jpg" alt="" />
<figcaption>往后余生,平淡是你</figcaption>
</figure>
<figure>
<img src="../img/14.jpg" alt="" />
<figcaption>往后余生,平淡是你</figcaption>
</figure>
<figure>
<img src="../img/15.jpg" alt="" />
<figcaption>往后余生,平淡是你</figcaption>
</figure>
<figure>
<img src="../img/16.jpg" alt="" />
<figcaption>往后余生,平淡是你</figcaption>
</figure>
<figure>
<img src="../img/17.jpg" alt="" />
<figcaption>往后余生,平淡是你</figcaption>
</figure>
<figure>
<img src="../img/18.jpg" alt="" />
<figcaption>往后余生,平淡是你</figcaption>
</figure>
<figure>
<img src="../img/19.jpg" alt="" />
<figcaption>往后余生,平淡是你</figcaption>
</figure>
<figure>
<img src="../img/20.jpg" alt="" />
<figcaption>往后余生,平淡是你</figcaption>
</figure>
<figure>
<img src="../img/21.jpg" alt="" />
<figcaption>往后余生,平淡是你</figcaption>
</figure>
<figure>
<img src="../img/22.jpg" alt="" />
<figcaption>往后余生,平淡是你</figcaption>
</figure>
<figure>
<img src="../img/23.jpg" alt="" />
<figcaption>往后余生,平淡是你</figcaption>
</figure>
<figure>
<img src="../img/24.jpg" alt="" />
<figcaption>往后余生,平淡是你</figcaption>
</figure>
<figure>
<img src="../img/25.jpg" alt="" />
<figcaption>往后余生,平淡是你</figcaption>
</figure>
<figure>
<img src="../img/26.jpg" alt="" />
<figcaption>往后余生,平淡是你</figcaption>
</figure>
<figure>
<img src="../img/27.jpg" alt="" />
<figcaption>往后余生,平淡是你</figcaption>
</figure>
<figure>
<img src="../img/28.jpg" alt="" />
<figcaption>往后余生,平淡是你</figcaption>
</figure>
<figure>
<img src="../img/29.jpg" alt="" />
<figcaption>往后余生,平淡是你</figcaption>
</figure>
</div>
</body>
</html>
效果图: