<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
*{
margin: 0;padding: 0;
}
html,body{
height: 100%;
}
html{
background: black url(../images/a.png)
}
body{
background: url(../images/bg.gif)
}
section{
columns: 5;
margin: 0 20px;
}
img{
width: 100%;
height: 100%;
}
figure{
border: 2px solid pink;
margin: 0 0 10px;
break-inside: avoid;
}
figcaption{
color: #fff;
text-align: center;
}
</style>
</head>
<body>
<section>
<figure>
<img src="../images/1.jpg" alt="">
<figcaption>往后余生</figcaption>
</figure>
<figure>
<img src="../images/2.jpg" alt="">
<figcaption>往后余生</figcaption>
</figure>
<figure>
<img src="../images/3.jpg" alt="">
<figcaption>往后余生</figcaption>
</figure>
<figure>
<img src="../images/4.jpg" alt="">
<figcaption>往后余生</figcaption>
</figure>
<figure>
<img src="../images/5.jpg" alt="">
<figcaption>往后余生</figcaption>
</figure>
<figure>
<img src="../images/6.jpg" alt="">
<figcaption>往后余生</figcaption>
</figure>
<figure>
<img src="../images/7.jpg" alt="">
<figcaption>往后余生</figcaption>
</figure>
<figure>
<img src="../images/8.jpg" alt="">
<figcaption>往后余生</figcaption>
</figure>
<figure>
<img src="../images/9.jpg" alt="">
<figcaption>往后余生</figcaption>
</figure>
<figure>
<img src="../images/10.jpg" alt="">
<figcaption>往后余生</figcaption>
</figure>
<figure>
<img src="../images/11.jpg" alt="">
<figcaption>往后余生</figcaption>
</figure>
<figure>
<img src="../images/12.jpg" alt="">
<figcaption>往后余生</figcaption>
</figure>
<figure>
<img src="../images/13.jpg" alt="">
<figcaption>往后余生</figcaption>
</figure>
<figure>
<img src="../images/14.jpg" alt="">
<figcaption>往后余生</figcaption>
</figure>
<figure>
<img src="../images/15.jpg" alt="">
<figcaption>往后余生</figcaption>
</figure>
<figure>
<img src="../images/16.jpg" alt="">
<figcaption>往后余生</figcaption>
</figure>
<figure>
<img src="../images/17.jpg" alt="">
<figcaption>往后余生</figcaption>
</figure>
<figure>
<img src="../images/18.jpg" alt="">
<figcaption>往后余生</figcaption>
</figure>
<figure>
<img src="../images/19.jpg" alt="">
<figcaption>往后余生</figcaption>
</figure>
<figure>
<img src="../images/20.jpg" alt="">
<figcaption>往后余生</figcaption>
</figure>
<figure>
<img src="../images/21.jpg" alt="">
<figcaption>往后余生</figcaption>
</figure>
<figure>
<img src="../images/22.jpg" alt="">
<figcaption>往后余生</figcaption>
</figure>
<figure>
<img src="../images/23.jpg" alt="">
<figcaption>往后余生</figcaption>
</figure>
<figure>
<img src="../images/24.jpg" alt="">
<figcaption>往后余生</figcaption>
</figure>
<figure>
<img src="../images/25.jpg" alt="">
<figcaption>往后余生</figcaption>
</figure>
<figure>
<img src="../images/26.jpg" alt="">
<figcaption>往后余生</figcaption>
</figure>
<figure>
<img src="../images/27.jpg" alt="">
<figcaption>往后余生</figcaption>
</figure>
<figure>
<img src="../images/28.jpg" alt="">
<figcaption>往后余生</figcaption>
</figure>
<figure>
<img src="../images/29.jpg" alt="">
<figcaption>往后余生</figcaption>
</figure>
<figure>
<img src="../images/30.jpg" alt="">
<figcaption>往后余生</figcaption>
</figure>
<figure>
<img src="../images/31.jpg" alt="">
<figcaption>往后余生</figcaption>
</figure>
<figure>
<img src="../images/32.jpg" alt="">
<figcaption>往后余生</figcaption>
</figure>
<figure>
<img src="../images/33.jpg" alt="">
<figcaption>往后余生</figcaption>
</figure>
<figure>
<img src="../images/34.jpg" alt="">
<figcaption>往后余生</figcaption>
</figure>
<figure>
<img src="../images/35.jpg" alt="">
<figcaption>往后余生</figcaption>
</figure>
<figure>
<img src="../images/36.jpg" alt="">
<figcaption>往后余生</figcaption>
</figure>
<figure>
<img src="../images/37.jpg" alt="">
<figcaption>往后余生</figcaption>
</figure>
<figure>
<img src="../images/38.jpg" alt="">
<figcaption>往后余生</figcaption>
</figure>
<figure>
<img src="../images/39.jpg" alt="">
<figcaption>往后余生</figcaption>
</figure>
<figure>
<img src="../images/40.jpg" alt="">
<figcaption>往后余生</figcaption>
</figure>
<figure>
<img src="../images/41.jpg" alt="">
<figcaption>往后余生</figcaption>
</figure>
</section>
</body>
</html>
这是一个HTML页面示例，展示了40张带有'往后余生'标题的图片。页面背景采用黑色并搭配粉色边框的图片展示，每张图片都设有相应的描述。页面使用了columns属性进行布局，使得图片在页面上分布更加灵活。
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
