上节课完成的页面是这样的
● 之后我们设置一下图标
.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;
}
● 这样一个好看的卡片就制作出来了,后面的卡片我们可以直接复制这个样例
● 接着替换内容,然后我们给不同标签一个不同的颜色
这样一个好看的卡片就完成了,下节课再完成饮食清单的部分吧!