当前位置：首页 > CSS

css制作许愿墙六块

2026-01-27 23:25:22CSS

使用CSS Grid布局创建许愿墙六块

HTML结构中定义一个包含六个子元素的容器：

<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>

CSS样式设置两行三列的网格布局：

.wish-wall {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: repeat(2, 1fr);
  gap: 15px;
  width: 90%;
  max-width: 800px;
  margin: 0 auto;
}

.wish-item {
  background-color: #ffebcd;
  border-radius: 8px;
  padding: 20px;
  box-shadow: 0 4px 8px rgba(0,0,0,0.1);
  text-align: center;
  min-height: 150px;
}

使用Flexbox实现六块布局

HTML结构与之前相同，CSS改用flex布局：

css制作许愿墙六块

.wish-wall {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  width: 90%;
  max-width: 800px;
  margin: 0 auto;
}

.wish-item {
  width: calc(33.333% - 10px);
  margin-bottom: 20px;
  background-color: #e6f7ff;
  border: 1px solid #91d5ff;
  border-radius: 4px;
  padding: 15px;
  box-sizing: border-box;
}

添加悬停动画效果

为愿望块添加交互效果：

.wish-item {
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.wish-item:hover {
  transform: translateY(-5px);
  box-shadow: 0 10px 20px rgba(0,0,0,0.1);
}

响应式设计调整

针对移动设备调整布局：

css制作许愿墙六块

@media (max-width: 768px) {
  .wish-wall {
    grid-template-columns: repeat(2, 1fr);
  }

  .flexbox-version .wish-item {
    width: calc(50% - 10px);
  }
}

@media (max-width: 480px) {
  .wish-wall {
    grid-template-columns: 1fr;
  }

  .flexbox-version .wish-item {
    width: 100%;
  }
}

添加视觉装饰元素

增强许愿墙的视觉效果：

.wish-item {
  position: relative;
  overflow: hidden;
}

.wish-item::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 5px;
  background: linear-gradient(90deg, #ff9a9e, #fad0c4);
}

完整示例代码

结合所有特性的完整实现：

<!DOCTYPE html>
<html>
<head>
<style>
.wish-wall {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: repeat(2, 1fr);
  gap: 20px;
  width: 90%;
  max-width: 900px;
  margin: 30px auto;
}

.wish-item {
  background: white;
  border-radius: 12px;
  padding: 25px;
  box-shadow: 0 6px 12px rgba(0,0,0,0.08);
  transition: all 0.3s ease;
  position: relative;
  overflow: hidden;
  min-height: 180px;
}

.wish-item:hover {
  transform: translateY(-8px);
  box-shadow: 0 12px 24px rgba(0,0,0,0.15);
}

.wish-item::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 8px;
  background: linear-gradient(90deg, #a18cd1, #fbc2eb);
}

@media (max-width: 768px) {
  .wish-wall {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 480px) {
  .wish-wall {
    grid-template-columns: 1fr;
  }
}
</style>
</head>
<body>

<div class="wish-wall">
  <div class="wish-item">写下你的第一个愿望</div>
  <div class="wish-item">记录重要的目标</div>
  <div class="wish-item">分享你的梦想</div>
  <div class="wish-item">许下新年愿望</div>
  <div class="wish-item">写下旅行计划</div>
  <div class="wish-item">记录学习目标</div>
</div>

</body>
</html>