94.构建样品餐部分第二节

上节课完成的页面是这样的

● 之后我们设置一下图标

.meal-attribute {
  font-size: 1.8rem;
  font-weight: 500;
  display: flex;
  align-items: center;
  gap: 1.6rem;
}

.meal-img {
  width: 100%;
}

.meal-icon {
  height: 2.4rem;
  width: 2.4rem;
  color: #e67e22;
}

● 为了突出这些参数的数据，我们把数字单独添加一个class

● 接着我们设置一下文本样式

.meal-tags {
  margin-bottom: 1.8rem;
}

.tag {
  display: inline-block;
  padding: 0.4rem 0.8rem;
  font-size: 1.2rem;
  background-color: #51cf66;
  color: #333;
  font-weight: 600;
  border-radius: 100px;
}

● 接下来就是添加边框阴影了

.meal {
  box-shadow: 0 2.4rem 4.8rem rgba(0, 0, 0, 0.075);
}

● 之后就是添加圆角了

.meal {
  box-shadow: 0 2.4rem 4.8rem rgba(0, 0, 0, 0.075);
  border-radius: 11px;
}

● 但是我们的图片再边框之上，我们可以通过overflow参数去

.meal {
  box-shadow: 0 2.4rem 4.8rem rgba(0, 0, 0, 0.075);
  border-radius: 11px;
  overflow: hidden;
}

##overflow属性用于控制内容超出容器时的行为。它有以下几个值:
1. visible: 默认值。内容超出容器的部分显示。
2. hidden: 超出容器的内容被剪切,不显示。
3. scroll: 超出容器的内容被剪切,但浏览器会显示滚动条以滚动查看其余内容。
4. auto: 如果内容超出容器,会显示滚动条;如果内容没有超出容器,不显示滚动条。
5. inherit: 继承父元素的overflow设置。

● 之后我们添加padding

.meal {
  box-shadow: 0 2.4rem 4.8rem rgba(0, 0, 0, 0.075);
  border-radius: 11px;
  overflow: hidden;
  padding: 4.8rem;
}

● 内容脱离了box，我们需要给内容单独再加一个class，然后给这个class一个padding的值

.meal-content {
  padding: 4.8rem;
}

● 这样一个好看的卡片就制作出来了，后面的卡片我们可以直接复制这个样例

● 接着替换内容，然后我们给不同标签一个不同的颜色

这样一个好看的卡片就完成了，下节课再完成饮食清单的部分吧！