CSS 实例系列

news2024/10/6 14:28:06

Hello 小伙伴们早上、中午、下午、晚上和深夜好，这里是 jsliang~

本 CSS 系列文章：

  1. 主推学以致用。结合面试题和工作实例，让小伙伴们深入体验 61 个工作常见的 CSS 属性和各种 CSS 知识。

  2. 主推纯 CSS。尽可能使用 HTML + CSS 完成学习目的，但仍然有 “一小部分” 功能需要用到 JavaScript 知识，适合新人学习 + 大佬复习。

如果文章在一些细节上没写清楚或者误导读者，欢迎评论/吐槽/批判，你的点赞、收藏和关注是我更新的动力 ❤

  • 更多知识分享文章可见：jsliang 的文档库

  • 本系列知识点代码可见：Demo —— all for one

一 前言

在 2022.07 左右的时候，同办公室的前端小伙伴就吐槽：我 CSS 有点差，如果能稍微学习提升下就好了。

哎嘿！这学习思路不就来了吗~

c59cc349ff7196f267dd8b8c93db3c0b.png

遂 偷偷摸摸去观看 了自己项目中的 121 个 CSS/Less 文件，将里面的 CSS 属性都抽离了出来，本来想直接 share 过去，希望让他看完能有所收获。

后面一想，这样突兀将知识点抛出来没啥意义，还显得非常枯燥！

所以，结合「Tab 滑动门」「DropDown 下拉面板」「Flex 布局」等工作实例，让小伙伴们能更好地体会这些 CSS 属性的作用。

如果文章在一些细节上没写清楚或者误导读者，欢迎评论/吐槽/批判，你的点赞、收藏和关注是我更新的动力 ❤

二 目标

jsliang 在项目中挖掘的常见 CSS 属性有 61 个，并进行了个人归类。

如果下面归类有 CSS 属性，「确认过眼神，那是你不懂的 code」，请使用 Ctrl + F 在本文搜索该 CSS 属性在实例上的使用。

这里仅做统计，用以辅助 jsliang 统计哪些属性还没写案例，或者让小伙伴们看看哪些属性是陌生的~

9aea044a8b3784830230da62a6aa7b81.png

在了解学习这些 CSS 属性的时候，推荐 2 个靠谱网站：

  • Can I use - CSS 兼容性查询

  • MDN - CSS 属性介绍

2.1 影响元素大小

  • [x] box-sizing 计算元素大小的方式

  • [x] width 宽度

    • [ ] min-width 最小宽度

    • [x] max-width 最大宽度

  • [x] height 高度

    • [ ] min-height 最小高度

    • [ ] max-height 最大高度

  • [x] margin 外边距

  • [x] padding 内边距

  • [x] border 边框

2.2 字体

  • [x] font-size 字体大小

  • [x] font-weight 字体肥瘦

  • [ ] font-style 字体风格

  • [ ] font-family 字体类型

2.3 影响颜色

  • [x] background 背景

  • [x] color 颜色

  • [x] filter 滤镜

  • [x] opacity 透明度

2.4 伪元素

  • [x] ::before 第一个子元素

  • [x] ::after 最后一个子元素

  • [x] content 用于在元素的 ::before 和 ::after 伪元素中插入内容

  • [x] ::placeholder 适用于 <input>，调整 placeholder 样式

2.5 伪类

  • [x] :hover 鼠标 hover 效果

  • [ ] :active 元素活跃态效果

2.6 元素选择器

  • [x] :first-child 第一个元素

  • [x] :last-child 最后一个元素

  • [x] :nth-child 第几个元素，可以使用 2n 这种设置偶数个元素样式

  • [ ] a > b 兄弟元素选择器

  • [ ] a + b 兄弟元素选择器

  • [x] a ~ b 兄弟元素选择器

2.7 定位

  • [x] position: absolute/fixed 开启定位

  • [x] left 距左

  • [x] right 距右

  • [x] top 距上

  • [x] bottom 距下

2.8 元素可见

  • [x] visibility: visible/hidden 视觉上显示隐藏

  • [x] display: block/none DOM 层级上显示隐藏

  • [x] opacity: 1/0 透明度上显示隐藏

2.9 Flex 全家桶

  • [x] display: flex Flex 布局

  • [x] justify-content 水平方位调整

  • [x] align-items 垂直方位调整

  • [x] flex-direction 排列方向

  • [x] flex-shrink Flex 的元素是否能挤压

  • [ ] flex-grow Flex 的元素增长项

  • [ ] flex-basis Flex 的元素起始位置

2.10 其他：字母顺序

  • [x] animation 动画

  • [x] border-radius 圆角

  • [x] box-shadow 阴影

  • [x] calc() 计算属性

  • [x] cursor 鼠标手势

  • [x] display 布局

  • [x] line-height 行高

  • [x] linear-gradient 创建颜色渐变的图片

  • [x] :not() 非指定元素

  • [x] outline 轮廓属性，可用于 input/a 等属性

  • [x] overflow 滚动效果

    • [x] overflow-x 横向滚动效果

    • [x] overflow-y 竖向滚动效果

  • [x] position 定位

  • [x] pointer-events 特定元素是否响应鼠标事件

  • [x] text-align 水平布局方式

  • [x] text-overflow 如何处理溢出的文本（...）

  • [ ] text-indent 块文本首行缩进

  • [x] transition 状态切换过渡效果

  • [x] transform 旋转，缩放，倾斜或平移给定元素

    • [x] transform-origin 起始位置

  • [ ] vertical-align 垂直布局方式

  • [x] white-space 处理元素空白

  • [x] z-index 层级

三 初始化导航页

OK，话不多说，让我们折腾起来吧！

新建 code 文件夹，用来存放我们我们的项目代码：

- code
 - index.html

首页的 HTML 主要做一个导航，本来打算上 Shadow DOM 做一个公共部分代码的。

但想想，这样增加了心智负担，所以后续代码会尽可能简洁，并且讲解部分只有关键代码~

（需要全部代码的，去代码仓库或者在线代码平台看喔~）

code/index.html

<div class="catalog">
  <a class="catalog-item active" target="_blank" href="./dropdown/index.html">Dropdown 下拉面板</a>
  <a class="catalog-item" target="_blank" href="./flex/index.html">Flex 布局</a>
  <a class="catalog-item" target="_blank" href="./tab/index.html">Tab 滑动门</a>
  <a class="catalog-item" target="_blank" href="./dialog/index.html">Dialog 对话框</a>
  <a class="catalog-item" target="_blank" href="./case-a-letter/index.html">一封给未来自己的信</a>
  <!-- 滑动门 -->
  <div class="catalog-active"></div>
</div>

简单来说，首页就是做了个普通的导航栏，打开页面后可见效果：

8914507058a6286530f3f0c3862ee960.png

线上代码地址：

  • 码上掘金 - CSS 系列 - 首页

这样，我们的首页/导航页就实现啦，接下来逐个实现实例的内容即可！

Tips：正常开发，可以通过 npm 安装 live-server 热更新代码，并配合 Visio Studio Code 等任意编辑器流畅使用~

本系列的项目代码，你可以通过 GitHub 仓库查看，或者在线上代码平台尝试：

  • 更多知识分享文章可见：jsliang 的文档库

  • 本系列知识点代码可见：Demo —— all for one

四 CSS 实例

后续会逐步完善下面的实例内容，小伙伴们可以看有没有感兴趣的实例~

（或者在这个列表里面不存在的实例，也可以喊 jsliang 帮你实现）

4.1 Tab 滑动门

通过 HTML + CSS，以及简单的 JS，实现 Tab 滑动门：

20978aab3fea70475d5ac1734e700186.gif

  • 文章教程地址：已有草稿，待发布

  • 视频教程地址：待制作

  • 仓库代码地址：已有草稿，待发布

  • 线上代码地址：已有草稿，待发布

  • 主要涉及属性：transition

4.2 Flex 布局

通过 HTML + CSS，以及简单的 JS，实现 Flex 切割 div：

a85ddb168b4b2a90a2733363002d0c23.gif

  • 文章教程地址：已有草稿，待发布

  • 视频教程地址：待制作

  • 仓库代码地址：已有草稿，待发布

  • 线上代码地址：已有草稿，待发布

  • 主要涉及属性：display: flex、flex-shrink

4.3 Dropdown 下拉面板

通过纯 HTML + CSS，实现 Dropdown 下拉面板：

630dd0d4e4edc4f6ef5c18554c0e58e2.gif

  • 文章教程地址：已有草稿，待发布

  • 视频教程地址：待制作

  • 仓库代码地址：已有草稿，待发布

  • 线上代码地址：已有草稿，待发布

  • 主要涉及属性：::-webkit-scrollbar、::-webkit-scrollbar-thumb、box-sizing、calc()、overflow-y

4.4 Dialog 对话框

通过 HTML + CSS，以及简单的 JS，实现 2 套 Dialog 对话框动画：

bbf961150de1e9a446e67d2fe4ad9f71.gif

  • 文章教程地址：已有草稿，待发布

  • 视频教程地址：待制作

  • 仓库代码地址：已有草稿，待发布

  • 线上代码地址：已有草稿，待发布

  • 主要涉及属性：transition

4.5 Envelope 给自己的一封信

通过多个 HTML + CSS + JS 效果，组合成一个比较完整的实例：

a0edf81364a76210f704b2504fa72c9d.gif

  • 文章教程地址：已有草稿，待发布

  • 视频教程地址：待制作

  • 仓库代码地址：已有草稿，待发布

  • 线上代码地址：已有草稿，待发布

  • 主要涉及属性：calc()、linear-gradient、::-webkit-scrollbar、::-webkit-scrollbar-thumb、transition、transform-origin、repeating-linear-gradient、opacity、rotateX()、translateY()、::before、animation

4.6 Input 输入框

通过纯 HTML + CSS，实现 Input 输入框：

4f271a8b6a433dcf4dadd8f5942ac070.gif

  • 文章教程地址：已有草稿，待发布

  • 视频教程地址：待制作

  • 仓库代码地址：已有草稿，待发布

  • 线上代码地址：已有草稿，待发布

  • 主要涉及属性：transition、::placeholder、:not()、a ~ b、transform、translate3d()、scale、opacity、transform

4.7 Rate 评分

通过 HTML + CSS，以及简单的 JS，实现评分功能：

8ed2dca286dbb98b5da0a057ccf0a69b.gif

  • 文章教程地址：已有草稿，待发布

  • 视频教程地址：待制作

  • 仓库代码地址：已有草稿，待发布

  • 线上代码地址：已有草稿，待发布

  • 主要涉及属性：display: flex、flex-direction、::after、a ~ b、:hover、:checked

4.8 Gallery 相册

通过纯 HTML + CSS，实现相册面板，同时有一点小小的 JS 功能：

a20a827bc649dcbdb03df0ded351456e.gif

  • 文章教程地址：已有草稿，待发布

  • 视频教程地址：待制作

  • 仓库代码地址：已有草稿，待发布

  • 线上代码地址：已有草稿，待发布

  • 主要涉及属性：box-shadow、opacity、:hover、box-sizing、filter、brightness()、:first-child、:last-child

4.9 Waterfall 瀑布流

通过简单的 HTML + CSS，以及 JS 动态绘制瀑布流：

df3f0735d271558ce11148fc0d3705f6.gif

  • 文章教程地址：已有草稿，待发布

  • 视频教程地址：待制作

  • 仓库代码地址：已有草稿，待发布

  • 线上代码地址：已有草稿，待发布

  • 主要涉及属性：display: flex、flex-shrink、calc()、@media

五 参考文献

  • Can I use - CSS 兼容性查询

  • MDN - CSS 属性介绍

不折腾的前端，和咸鱼有什么区别！

觉得文章不错的小伙伴欢迎点赞/点 Star。

如果小伙伴需要联系 jsliang：

  • Github

  • 掘金

个人联系方式存放在 Github 首页，欢迎一起折腾~

争取打造自己成为一个充满探索欲，喜欢折腾，乐于扩展自己知识面的终身学习斜杠程序员。

jsliang 的文档库由 梁峻荣 采用 知识共享 署名-非商业性使用-相同方式共享 4.0 国际 许可协议 进行许可。
基于 https://github.com/LiangJunrong/document-library 上的作品创作。
本许可协议授权之外的使用权限可以从 https://creativecommons.org/licenses/by-nc-sa/2.5/cn/ 处获得。

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

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈，一经查实，立即删除！

相关文章

nohup命令详解

nohup命令详解

nohup命令详解一、背景说明&#xff1a;启动服务的时候&#xff0c;如果使用如下命令&#xff0c;则会在start.sh脚本所在的目录下&#xff0c;产生一个名为 nohup.out 的输出文件nohup ./startup.sh &可以看到下面这个例子&#xff0c;一开始当前目录是没有nohup.out文件的…
阅读更多...
RocketMQ 多语言 SDK 开源贡献召集令

RocketMQ 多语言 SDK 开源贡献召集令

作者&#xff1a;艾阳坤 目前 Apache RocketMQ 5.0 SDK [ 1] 正在社区开源&#xff0c;开发与迭代也在火热进行中&#xff0c;欢迎广大社区的朋友们能够参与其中。我们欢迎任何形式的贡献&#xff0c;包括但不限于新 feature、bugfix、代码优化、生态集成、测试工作、文档撰写…
阅读更多...
我与 CSDN 的 2022 年终总结

我与 CSDN 的 2022 年终总结

&#x1f482; 个人网站:【海拥】【摸鱼游戏】【神级源码资源网】&#x1f91f; 前端学习课程&#xff1a;&#x1f449;【28个案例趣学前端】【400个JS面试题】&#x1f485; 想寻找共同学习交流、摸鱼划水的小伙伴&#xff0c;请点击【摸鱼学习交流群】 转眼间2023年已经过去…
阅读更多...
《后端技术面试 38 讲》学习笔记 Day 02

《后端技术面试 38 讲》学习笔记 Day 02

《后端技术面试 38 讲》学习笔记 Day 02 08丨软件设计的方法论&#xff1a;软件为什么要建模&#xff1f; 原文摘抄 所谓软件建模&#xff0c;就是为要开发的软件建造模型。模型是对客观存在的抽象&#xff0c;我们常说的数学建模&#xff0c;就是用数学公式作为模型&#xf…
阅读更多...
flask + Pandas + echarts 使用饼状图等将二手房数据进行分析+可视化

flask + Pandas + echarts 使用饼状图等将二手房数据进行分析+可视化

目录 一、实战场景 二、知识点 python 基础语法 python 文件读写 pandas 数据处理 flask web 框架 echarts 图表 bootstrap jinja 模版 三、菜鸟实战 初始化 Flask 框架&#xff0c;设置路由 各行政区房屋数量柱状图分析 区域二手房房源朝向分布情况 二手房单价最…
阅读更多...
Higress Kruise Rollout: 渐进式交付为应用发布保驾护航

Higress Kruise Rollout: 渐进式交付为应用发布保驾护航

作者&#xff1a;扬少 前言 在业务高速发展过程中&#xff0c;如何最大化保障功能迭代过程中业务流量无损一直是开发者比较关心的问题。通常在应用发布新功能阶段&#xff0c;我们会采用灰度发布的思想对新版本进行小流量验证&#xff0c;在符合预期之后再进行全量发布&#…
阅读更多...
11、JS笔记-内置对象

11、JS笔记-内置对象

1.内置对象 js中对象分为三种&#xff1a; 自定义对象、内置对象、浏览器对象&#xff08;js独有&#xff09; 内置对象&#xff1a; js语言自带的对象&#xff0c;供开发者使用&#xff0c;提供一些常用或基本的功能&#xff08;属性和方法&#xff09; 2.Math对象 Math中所…
阅读更多...
【云原生】k8s配置资源管理

【云原生】k8s配置资源管理

内容预知 1.Secret的资源配置 1.1 Secret配置的相关说明 1.2 陈述式创建Secret配置 1.3 声明式base64编码创建Secret 1.4 将secret以volume形式挂载到pod中 1.5 将Secret导入到pod中&#xff0c;充当环境变量 1.6 实战运用&#xff1a;使用secret配置免密交互拉取habor…
阅读更多...
Qt之对话框

Qt之对话框

文章目录一、对话框的概念二、与QWidget的区别三、对话框2种显示方法四、对话框返回值的概念本节示例提示&#xff1a;以下是本篇文章正文内容&#xff0c;下面案例可供参考 一、对话框的概念 对话框是和用户简短交互的一种窗口。如&#xff1a;登录界面&#xff0c;关于界面…
阅读更多...
知识付费图文音视频课程公众号系统开发

知识付费图文音视频课程公众号系统开发

知识付费图文音视频课程公众号系统开发 功能特性;为你介绍音视频课程点播系统的功能特性。 微信H5;目前只支持微信公众号H5访问。 课程管理;后台可上传多个课程分类与课程。 名师推荐;后台可以维护教师列表&#xff0c;并推荐到首页显示。 分享海报;可以自定义多个分享海报。 …
阅读更多...
Maven在项目里的具体使用方式，很简单

Maven在项目里的具体使用方式，很简单

大家好&#xff0c;今天给大家分享一下Maven在项目里的*具体使用方式* 有关于maven这个东西&#xff0c;要知道&#xff0c;它的作用是帮助开发人员&#xff08;也就是我们&#xff09;批量的管理jar包 所谓对jar包批量管理&#xff0c;有一个很重要的点&#xff0c; 就是对于…
阅读更多...
2022年CSDN年终总结：一个新晋研究生的遗憾与成长

2022年CSDN年终总结：一个新晋研究生的遗憾与成长

目录0 遗憾1 顺利完成毕业设计2 转向垂类写作3 C站成长4 组织社区活动5 新年新flag0 遗憾 2022年有很多遗憾 其一&#xff0c;毕业的遗憾。3月疫情席卷上海&#xff0c;封校封寝、静态网格&#xff0c;每天从上床到下桌两点一线&#xff0c;5月窗口期身着防护服撤离上海&…
阅读更多...
云原生|kubernetes|pod或容器的安全上下文配置解析

云原生|kubernetes|pod或容器的安全上下文配置解析

前言&#xff1a; 安全上下文&#xff08;Security Context&#xff09;定义 Pod 或 Container 的特权与访问控制设置。 安全上下文包括但不限于&#xff1a; 自主访问控制&#xff08;Discretionary Access Control&#xff09;&#xff1a; 基于用户 ID&#xff08;UID&…
阅读更多...
【PAT甲级 - C++题解】1091 Acute Stroke

【PAT甲级 - C++题解】1091 Acute Stroke

✍个人博客&#xff1a;https://blog.csdn.net/Newin2020?spm1011.2415.3001.5343 &#x1f4da;专栏地址&#xff1a;PAT题解集合 &#x1f4dd;原题地址&#xff1a;题目详情 - 1091 Acute Stroke (pintia.cn) &#x1f511;中文翻译&#xff1a;急性中风 &#x1f4e3;专栏…
阅读更多...
SAP灵活工作流Inbox收件箱数据展示

SAP灵活工作流Inbox收件箱数据展示

目录 任务说明展示流程内容 使用增强添加文本展示流程内容 自定义页面展示 任务说明展示流程内容 维护审批任务说明页签下的任务说明&#xff0c;支持多语种&#xff0c;支持使用变量&#xff1b; 变量只能使用容器中定义的变量&#xff0c;因此需要将要展示的数据绑定传输到…
阅读更多...
【包装机】（队列+栈）

【包装机】（队列+栈）

一种自动包装机的结构如图 1 所示。首先机器中有 N 条轨道&#xff0c;放置了一些物品。轨道下面有一个筐。当某条轨道的按钮被按下时&#xff0c;活塞向左推动&#xff0c;将轨道尽头的一件物品推落筐中。当 0 号按钮被按下时&#xff0c;机械手将抓取筐顶部的一件物品&#x…
阅读更多...
C++动态链接库的使用

C++动态链接库的使用

目录一 创建Windows动态链接库二 导出和查看DLL中的函数三 隐式链接方式加载DLL四 动态库和测试程序共用一份头文件五 从DLL中导出C类六 解决名称改编七 显式加载方式加载DLL一 创建Windows动态链接库 新建项目&#xff0c;选择Windows桌面向导&#xff0c;命名项目名称为Dll1…
阅读更多...
GPDB中gp_vmem_protect_limit参数的意义

GPDB中gp_vmem_protect_limit参数的意义

gp_vmem_protect_limit参数的意义1、gp_vmem_protect_limit参数说明1)在启用了基于资源队列的资源管理系统时&#xff0c;gp_vmem_protect_limit参数表示每个segment分配到的内存大小。预估值计算方式&#xff1a;所有GP数据库进程可用内存大小/发生故障时最大的primary segmen…
阅读更多...
最优控制学习笔记2----泛函

最优控制学习笔记2----泛函

文章目录泛函泛函定义泛函的变分自变量的变分泛函相近泛函距离泛函的连续性线性泛函泛函的变分泛函的极值泛函极值的定义泛函的极值泛函极值条件泛函 泛函定义 对于某一类函数集合{x(t)}\{x(t)\}{x(t)} 中的每一个函数 x(t)x(t)x(t), 在映射关系 JJJ 下均有一个确定的数与之对…
阅读更多...
100天精通Python（数据分析篇）——第71天：Pandas文本数据处理方法之str/object类型转换、大小写转换、文本对齐、获取长度、出现次数、编码

100天精通Python（数据分析篇）——第71天：Pandas文本数据处理方法之str/object类型转换、大小写转换、文本对齐、获取长度、出现次数、编码

文章目录每篇前言1. 文本数据类型介绍1&#xff09;类型介绍2&#xff09;类型转换3&#xff09;类型区别区别1&#xff1a;统计字符串时区别2&#xff1a;检查字符串时2. Python字符串内置方法1) 大小写转换2) 文本对齐3&#xff09;获取长度4&#xff09;获取出现次数5&#…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023