63.空白和视觉层级的实战应用

news2024/12/23 8:22:16

例如看我们之前的小网页；
在这里插入图片描述

这些标题的上下距离一样，这样让我们很容易对这些标题进行混淆，我们可以适当的添加一点空白

header,
section {
  margin-bottom: 96px;
}

在这里插入图片描述

这样看上去似乎就好很多！

除此之外，如我们之间学的空白元素，开头留空白会让用户有一个更好的观感

在这里插入图片描述

我们可以适当多留一些空白

header {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  column-gap: 80px;
  margin-top: 64px;
}

在这里插入图片描述

这样看出去可能会更好

标题的部分可能看上去空白也相对较少！

h1 {
  margin-bottom: 32px;
  font-size: 44px;
  line-height: 1.1;
  letter-spacing: -1px;
}

在这里插入图片描述

接着我们来调整这个：
在这里插入图片描述

/* FEATURES */
.features-icon {
  stroke: #087f5b;
  width: 32px;
  height: 32px;
  margin-bottom: 24px;
}

.features-title {
  margin-bottom: 16px;
  font-size: 20px;

}

在这里插入图片描述

接下来修改下面的一个模块
在这里插入图片描述

这个模块虽然已经通过调整背景颜色的方式去体现视觉层次，我们可以通过本次的方式让视觉层次更好！

.testimonial-text {
  font-style: italic;
  margin-bottom: 24px;
  font-size: 18px;
  list-style: 1.7;
  color: #e6fcf5;  #通过接近的验收来达到细微的变化
}

.testimonial-author{
  color: #c3fae8;#通过接近的验收来达到细微的变化
}

在这里插入图片描述

接下来我们调整下一个模块
在这里插入图片描述

这些产品的点肯定是让用户看上去集中一点，这样平均分布看起来不是太整体；

.chair-details {
  list-style: none;
  margin-bottom: 48px;
}
 
.chair-details li {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 16px;
}