做个HTML网页,每排三个图片,每个图片间隔20PX,最上面间隔50PX,一共有3排图片,背景色为黑色
时间: 2023-08-08 21:05:20 浏览: 34
你可以尝试以下 HTML 代码:
```
<!DOCTYPE html>
<html>
<head>
<title>图片网页</title>
<style>
body {
background-color: black;
}
.row {
display: flex;
justify-content: center;
margin-top: 50px;
}
.col {
padding: 20px;
}
img {
max-width: 100%;
display: block;
margin: 0 auto;
}
</style>
</head>
<body>
<div class="row">
<div class="col">
<img src="image1.jpg" alt="Image 1">
</div>
<div class="col">
<img src="image2.jpg" alt="Image 2">
</div>
<div class="col">
<img src="image3.jpg" alt="Image 3">
</div>
</div>
<div class="row">
<div class="col">
<img src="image4.jpg" alt="Image 4">
</div>
<div class="col">
<img src="image5.jpg" alt="Image 5">
</div>
<div class="col">
<img src="image6.jpg" alt="Image 6">
</div>
</div>
<div class="row">
<div class="col">
<img src="image7.jpg" alt="Image 7">
</div>
<div class="col">
<img src="image8.jpg" alt="Image 8">
</div>
<div class="col">
<img src="image9.jpg" alt="Image 9">
</div>
</div>
</body>
</html>
```
这个代码使用了 flexbox 布局来实现图片的排列。每个图片之间有 20px 的间隔,每行有三个图片,最上面的行与顶部距离为 50px,背景色为黑色。你可以将 `img` 标签的 `src` 属性替换为你实际使用的图片链接。