做个HTML网页,每排6个图片,每个图片间隔15PX,最上面间隔50PX,一共有5排图片,背景色为黑色.图片位置在image文件夹,点击图片下载压缩包
时间: 2023-08-08 09:13:20 浏览: 50
以下是一个简单的 HTML 网页代码,可以实现你所需的功能:
```html
<!DOCTYPE html>
<html>
<head>
<title>图片下载页面</title>
<style>
body {
background-color: black; /* 背景色为黑色 */
}
.image-row {
display: flex; /* 使用 flex 布局 */
justify-content: space-between; /* 图片间隔为 15px */
margin-top: 15px; /* 上下间距为 15px */
}
.image {
width: 150px; /* 图片宽度为 150px */
height: 150px; /* 图片高度为 150px */
}
.download-link {
display: block; /* 将下载链接设置为块级元素 */
text-align: center; /* 居中显示 */
margin-top: 10px; /* 上下间距为 10px */
color: white; /* 字体颜色为白色 */
text-decoration: none; /* 去掉下划线 */
}
</style>
</head>
<body>
<div class="image-row">
<img src="image/1.jpg" class="image" />
<img src="image/2.jpg" class="image" />
<img src="image/3.jpg" class="image" />
<img src="image/4.jpg" class="image" />
<img src="image/5.jpg" class="image" />
<img src="image/6.jpg" class="image" />
</div>
<div class="image-row">
<img src="image/7.jpg" class="image" />
<img src="image/8.jpg" class="image" />
<img src="image/9.jpg" class="image" />
<img src="image/10.jpg" class="image" />
<img src="image/11.jpg" class="image" />
<img src="image/12.jpg" class="image" />
</div>
<div class="image-row">
<img src="image/13.jpg" class="image" />
<img src="image/14.jpg" class="image" />
<img src="image/15.jpg" class="image" />
<img src="image/16.jpg" class="image" />
<img src="image/17.jpg" class="image" />
<img src="image/18.jpg" class="image" />
</div>
<div class="image-row">
<img src="image/19.jpg" class="image" />
<img src="image/20.jpg" class="image" />
<img src="image/21.jpg" class="image" />
<img src="image/22.jpg" class="image" />
<img src="image/23.jpg" class="image" />
<img src="image/24.jpg" class="image" />
</div>
<div class="image-row">
<img src="image/25.jpg" class="image" />
<img src="image/26.jpg" class="image" />
<img src="image/27.jpg" class="image" />
<img src="image/28.jpg" class="image" />
<img src="image/29.jpg" class="image" />
<img src="image/30.jpg" class="image" />
</div>
<a href="download.zip" class="download-link">点击这里下载压缩包</a>
</body>
</html>
```
在上面的代码中,我们使用了 flex 布局来实现每排 6 个图片,并且设置了图片之间的间距为 15px,上下间距也为 15px。同时,我们还设置了图片的宽度和高度为 150px,可以根据需要进行调整。
最后,我们在页面底部添加了一个下载链接,点击链接即可下载压缩包。
相关推荐
![zip](https://img-home.csdnimg.cn/images/20210720083736.png)
![rar](https://img-home.csdnimg.cn/images/20210720083606.png)
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)