用HTML实现在页面中显示九个板块高度为80%上下距离间隔10%,宽度为70%且居中,每行3个板块,每个板块中左侧为城市图片,右侧从上到下为城市名称和”查看“按钮,板块为粉色且有圆角边框,板块之间有20px的间隔
时间: 2024-05-11 10:18:17 浏览: 156
页面分区域展示
以下是一个示例代码,实现了你的需求:
```html
<!DOCTYPE html>
<html>
<head>
<title>九宫格</title>
<style type="text/css">
.container {
width: 70%;
margin: 10% auto;
display: flex;
flex-wrap: wrap;
justify-content: space-between;
align-content: space-between;
gap: 20px;
}
.box {
width: calc(33.33% - 20px);
height: 80%;
background-color: pink;
border-radius: 10px;
padding: 5px;
display: flex;
flex-direction: column;
align-items: center;
justify-content: space-between;
gap: 10px;
box-sizing: border-box;
}
.box img {
width: 100%;
object-fit: cover;
border-radius: 5px;
}
.btn {
padding: 5px 10px;
background-color: white;
border-radius: 5px;
border: none;
font-size: 16px;
cursor: pointer;
}
</style>
</head>
<body>
<div class="container">
<div class="box">
<img src="https://picsum.photos/id/1/200/200" alt="city">
<div>城市名称</div>
<button class="btn">查看</button>
</div>
<div class="box">
<img src="https://picsum.photos/id/2/200/200" alt="city">
<div>城市名称</div>
<button class="btn">查看</button>
</div>
<div class="box">
<img src="https://picsum.photos/id/3/200/200" alt="city">
<div>城市名称</div>
<button class="btn">查看</button>
</div>
<div class="box">
<img src="https://picsum.photos/id/4/200/200" alt="city">
<div>城市名称</div>
<button class="btn">查看</button>
</div>
<div class="box">
<img src="https://picsum.photos/id/5/200/200" alt="city">
<div>城市名称</div>
<button class="btn">查看</button>
</div>
<div class="box">
<img src="https://picsum.photos/id/6/200/200" alt="city">
<div>城市名称</div>
<button class="btn">查看</button>
</div>
<div class="box">
<img src="https://picsum.photos/id/7/200/200" alt="city">
<div>城市名称</div>
<button class="btn">查看</button>
</div>
<div class="box">
<img src="https://picsum.photos/id/8/200/200" alt="city">
<div>城市名称</div>
<button class="btn">查看</button>
</div>
<div class="box">
<img src="https://picsum.photos/id/9/200/200" alt="city">
<div>城市名称</div>
<button class="btn">查看</button>
</div>
</div>
</body>
</html>
```
这段代码会生成一个包含九个板块的九宫格,每个板块中包含一个图片、一个城市名称和一个按钮。你可以根据需要修改图片的来源和城市名称。
阅读全文