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

在这里插入图片描述

● 这样一个好看的卡片就制作出来了,后面的卡片我们可以直接复制这个样例
在这里插入图片描述

● 接着替换内容,然后我们给不同标签一个不同的颜色
在这里插入图片描述
在这里插入图片描述

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

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:/a/26903.html

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

CDH 之 hive 升级至 hive-3.1.3 完美踩坑过程

一、准备工作 1.1 前言 这是博主在升级过程中遇到的问题记录,大家不一定遇到过,如果不是 CDH 平台的话,单是 hive 服务升级应该是不会有这些问题的,且升级前博主也参考过几篇相关 CDH 升级 hive 服务的博文,前面的升级…

Java实现LL1语法分析器【编译原理】

java通过预测分析法实现语法分析程序【编译原理】 前言推荐实验要求需知LL1工作原理 Java实现LL1语法分析器0实验步骤LL1.javaGrammar.javaLeftRecursion.javaFirstAndFollow.javaAnalyzeTable.javaLL1Stack.java实验结果 Java实现LL1语法分析器1Grammar.javaProduction.javaFi…

Neo4j安装配置教程

目录结构 前言Neoj4简介安装JDKNeo4j安装步骤Neo4j下载解压Neo4j压缩包配置环境变量启动Neo4j执行命令报错,报错信息如下: 启动Neo4j,再次测试浏览器访问Neo4j参考链接 前言 安装所需配件网盘一键下载。以下描述中,官网下载均有描…

5.3图的综合应用算法

一.最小生成树算法 1.概念(Minimum-Spanning-Tree)MST 生成树:针对于连通图,包含全部顶点,去掉一条边后不连通,加一条边形成环 最小生成树:带权连通无向图,边的权值之和最小的生成树(MST) 2.…

基于LPP算法实现MNIST数据集降维

目录 1、作者介绍2、LPP算法简介2.1 基本概念及原理2.2 算法流程 3、LPP算法实现3.1 数据集简介3.2 代码实现3.2.1 完整代码3.2.2 运行结果 4、参考链接 1、作者介绍 刘晨雨,男,西安工程大学电子信息学院,2022级研究生 研究方向:…

Tomcat部署

Tomcat 一、Tomcat什么是 servlet?什么是 JSP?Tomcat 功能组件结构:Container 结构分析:Tomcat 请求过程: 二、Tomcat服务部署三、虚拟主机配置四、Tomcat多实例部署 Tomcat 是 Java 语言开发的,Tomcat 服务器是一个免…

前端录制回放rrweb

rrweb 是 ‘record and replay the web’ 的简写,旨在利用现代浏览器所提供的强大 API 录制并回放任意 web 界面中的用户操作。 rrweb中文文档 https://github.com/rrweb-io/rrweb/blob/master/guide.zh_CN.md 本文项目地址 https://github.com/qdfudimo/vue-rrweb…

目标检测算法:YOLO v1论文解读

目标检测算法:YOLO v1论文解读 前言 ​ 其实网上已经有很多很好的解读各种论文的文章了,但是我决定自己也写一写,当然,我的主要目的就是帮助自己梳理、深入理解论文,因为写文章,你必须把你所写的东西表达清…

深入了解Java虚拟机之高效并发

目录 Java内存模型与线程 概述 硬件的效率与一致性 Java内存模型 主内存与工作内存 内存间交互操作 对于volatile型变量的特殊规则 原子性、可见性与有序性 先行发生原则 Java与线程 线程实现 线程调度 状态切换 小结 线程安全与锁优化 概述 线程安全 Java中…

简单的UDP网络程序·续写

该文承接文章 简单的UDP网络程序 对于客户端和服务端的基本源码参考上文,该文对服务器润色一下,并且实现几个基本的业务服务逻辑 目录 demo1 第一个功能:字典翻译 初始化字典 测试代码:打印 字符串分割 客户端修改 成品效果…

AI宝典:AI超强工具大整合

😄😄个人介绍 光子郎.进行开发工作七年以上,目前涉及全栈领域并进行开发。会经常跟小伙伴分享前沿技术知识,java后台、web前端、移动端(Android,uniapp,小程序)相关的知识以及经验体…

C#发送邮箱设置及源码

用C#调用发送邮箱代码之前需要邮箱开通SMTP/POP3及设置授权码,开通及获取方法如下: 1、打开邮箱,登录邮箱,进入设置-》帐户 2、在“帐户”设置中,找到服务设置项,进行设置,如下…

[Flink] Flink On Yarn(yarn-session.sh)启动错误

在Flink上启动 yarn-session.sh时出现 The number of requested virtual cores for application master 1 exceeds the maximum number of virtual cores 0 available in the Yarn Cluster.错误。 版本说明: Hadoop: 3.3.4 Flink:1.17.1 问题…

Python实战基础20-解密文件及目录操作

任务1 为泸州驰援湖北的89名白衣勇士点赞 【任务描述】 设计python程序,实现用户可以为泸州驰援湖北的89名白衣勇士点赞留言。用户点赞留言内容保存到本地txt文件中。 import os # 导入os模块 import random # 导入随机模块 import string # 导入string模块# 定义…

《Lua程序设计》--学习3

输入输出 简单I/O模型 Lua 文件 I/O | 菜鸟教程 (runoob.com) 暂留 补充知识 局部变量和代码块 Lua语言中的变量在默认情况下是全局变量,所有的局部变量在使用前必须声明 在交互模式中,每一行代码就是一个代码段(除非不是一条完整的命…

chatgpt赋能python:Python如何将IP地址转换为整数

Python如何将IP地址转换为整数 在计算机网络中,IP地址是一个包含32位的二进制数字,通常由四个8位二进制数字(即“点分十进制”)表示。但在某些情况下,需要将IP地址转换为整数,例如在网络编程中检查网络连接…

Ingress详解

Ingress Service对集群外暴露端口两种方式,这两种方式都有一定的缺点: NodePort :会占用集群集群端口,当集群服务变多时,缺点明显LoadBalancer:每个Service都需要一个LB,并且需要k8s之外设备支…

FPGA量子类比机制-FPQA,将在量子运算设计中引发一场新的革命

1980年代现场可程式化逻辑门阵列(FPGA)的出现彻底改变了电子设计。大约40年后,现场可程式化量子位元阵列(FPQA)可望在量子运算电路设计中引发一场类似的革命。 1980年代现场可程式化逻辑闸阵列(FPGA)的出现彻底改变了电子设计。FPGA允许设计人员创建适合特定应用的…

ArrayList 万字长文解析:使用、优化、源码分析

文章目录 ArrayList 万字长文解析:使用、优化、源码分析前言ArrayList 简介ArrayList 的基本使用方法ArrayList 性能优化ArrayList 的源码分析内部结构构造方法解析扩容机制System.arraycop与 Arrays.copyof 实现方式 与 使用场景迭代器 JDK 8版本 ArrayList bug 示…

【基于Rsync实现Linux To Windows文件同步】

基于Rsync实现Linux To Windows文件同步 简介安装步骤安装Linux服务器端1.安装rsync2.启动Rsync3.验证是否启动成功4.修改rsyncd.conf重启rsync服务 安装Windows客户端1.rsync客户端安装:2.配置环境变量3.测试rsync命令4.创建密码文件5.密码文件授权6.查看服务端需要…