css制作许愿墙六块
CSS 制作许愿墙六块布局
使用 CSS 创建一个六块许愿墙布局可以通过多种方式实现，以下是两种常见的方法：使用 CSS Grid 或 Flexbox。以下代码示例展示了如何实现这两种布局。
方法一：使用 CSS Grid
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>许愿墙六块布局</title>
<style>
.wish-wall {
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-template-rows: repeat(2, 1fr);
gap: 10px;
width: 600px;
height: 400px;
margin: 0 auto;
padding: 20px;
background-color: #f0f0f0;
}
.wish-item {
background-color: #fff;
border: 1px solid #ccc;
border-radius: 8px;
display: flex;
justify-content: center;
align-items: center;
font-size: 18px;
color: #333;
}
</style>
</head>
<body>
<div class="wish-wall">
<div class="wish-item">许愿1</div>
<div class="wish-item">许愿2</div>
<div class="wish-item">许愿3</div>
<div class="wish-item">许愿4</div>
<div class="wish-item">许愿5</div>
<div class="wish-item">许愿6</div>
</div>
</body>
</html>方法二：使用 Flexbox
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>许愿墙六块布局</title>
<style>
.wish-wall {
display: flex;
flex-wrap: wrap;
width: 600px;
height: 400px;
margin: 0 auto;
padding: 20px;
background-color: #f0f0f0;
}
.wish-item {
width: calc(33.33% - 10px);
height: calc(50% - 10px);
margin: 5px;
background-color: #fff;
border: 1px solid #ccc;
border-radius: 8px;
display: flex;
justify-content: center;
align-items: center;
font-size: 18px;
color: #333;
}
</style>
</head>
<body>
<div class="wish-wall">
<div class="wish-item">许愿1</div>
<div class="wish-item">许愿2</div>
<div class="wish-item">许愿3</div>
<div class="wish-item">许愿4</div>
<div class="wish-item">许愿5</div>
<div class="wish-item">许愿6</div>
</div>
</body>
</html>关键点说明
- CSS Grid：通过
grid-template-columns和grid-template-rows定义三列两行的网格布局，适合规整的网格排列。 - Flexbox：通过
flex-wrap和calc计算每个块的宽度和高度，适合灵活的布局需求。 - 样式调整：可根据需要调整
width、height、gap或margin来改变布局的间距和尺寸。 - 响应式设计：可以添加媒体查询（Media Queries）使布局在不同屏幕尺寸下适配。
这两种方法都能实现六块许愿墙的布局，选择哪种取决于具体需求和偏好。
