在一个背景板里面有序排列八个有说明的图片h5代码
时间: 2024-02-27 22:57:57 浏览: 27
好的,下面是一个简单的H5代码,显示一个有序排列的八个带有说明的图片:
```
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>有序排列的八个带有说明的图片</title>
<style>
.container {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
align-items: center;
padding: 20px;
box-sizing: border-box;
background-color: #f2f2f2;
}
.item {
flex-basis: 20%;
margin: 10px;
text-align: center;
background-color: #fff;
box-shadow: 0px 0px 5px rgba(0,0,0,0.3);
border-radius: 5px;
padding: 20px;
box-sizing: border-box;
}
.item img {
max-width: 100%;
height: auto;
margin-bottom: 10px;
}
.item h3 {
margin: 0;
font-size: 18px;
font-weight: bold;
}
.item p {
margin: 0;
font-size: 14px;
color: #666;
}
</style>
</head>
<body>
<div class="container">
<div class="item">
<img src="image1.jpg" alt="图片1">
<h3>图片1</h3>
<p>这是图片1的说明文字</p>
</div>
<div class="item">
<img src="image2.jpg" alt="图片2">
<h3>图片2</h3>
<p>这是图片2的说明文字</p>
</div>
<div class="item">
<img src="image3.jpg" alt="图片3">
<h3>图片3</h3>
<p>这是图片3的说明文字</p>
</div>
<div class="item">
<img src="image4.jpg" alt="图片4">
<h3>图片4</h3>
<p>这是图片4的说明文字</p>
</div>
<div class="item">
<img src="image5.jpg" alt="图片5">
<h3>图片5</h3>
<p>这是图片5的说明文字</p>
</div>
<div class="item">
<img src="image6.jpg" alt="图片6">
<h3>图片6</h3>
<p>这是图片6的说明文字</p>
</div>
<div class="item">
<img src="image7.jpg" alt="图片7">
<h3>图片7</h3>
<p>这是图片7的说明文字</p>
</div>
<div class="item">
<img src="image8.jpg" alt="图片8">
<h3>图片8</h3>
<p>这是图片8的说明文字</p>
</div>
</div>
</body>
</html>
```
你只需将代码中的图片地址替换为你自己的图片地址,就可以显示你想要的八张图片了。希望这个例子能帮到你!