CSS 实例系列

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

本 CSS 系列文章:

  1. 主推学以致用。结合面试题和工作实例,让小伙伴们深入体验 61 个工作常见的 CSS 属性和各种 CSS 知识。
  2. 主推纯 CSS。尽可能使用 HTML + CSS 完成学习目的,但仍然有 “一小部分” 功能需要用到 JavaScript 知识,适合新人学习 + 大佬复习

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

一 前言

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

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

00-01.png

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

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

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

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

二 目标

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

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

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

00-02.png

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

2.1 影响元素大小

2.2 字体

2.3 影响颜色

2.4 伪元素

2.5 伪类

2.6 元素选择器

2.7 定位

2.8 元素可见

2.9 Flex 全家桶

2.10 其他:字母顺序

三 初始化导航页

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>

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

00-03.png

线上代码地址:

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

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

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

四 CSS 实例

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

(或者在这个列表里面不存在的实例,也可以喊 jsliang 帮你实现)

4.1 Tab 滑动门

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

00-04.gif

  • 文章教程地址:已有草稿,待发布
  • 视频教程地址:待制作
  • 仓库代码地址:已有草稿,待发布
  • 线上代码地址:已有草稿,待发布
  • 主要涉及属性transition

4.2 Flex 布局

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

00-05.gif

  • 文章教程地址:已有草稿,待发布
  • 视频教程地址:待制作
  • 仓库代码地址:已有草稿,待发布
  • 线上代码地址:已有草稿,待发布
  • 主要涉及属性display: flexflex-shrink

4.3 Dropdown 下拉面板

通过纯 HTML + CSS,实现 Dropdown 下拉面板:

00-06.gif

  • 文章教程地址:已有草稿,待发布
  • 视频教程地址:待制作
  • 仓库代码地址:已有草稿,待发布
  • 线上代码地址:已有草稿,待发布
  • 主要涉及属性::-webkit-scrollbar::-webkit-scrollbar-thumbbox-sizingcalc()overflow-y

4.4 Dialog 对话框

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

00-07.gif

  • 文章教程地址:已有草稿,待发布
  • 视频教程地址:待制作
  • 仓库代码地址:已有草稿,待发布
  • 线上代码地址:已有草稿,待发布
  • 主要涉及属性transition

4.5 Envelope 给自己的一封信

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

00-08.gif

  • 文章教程地址:已有草稿,待发布
  • 视频教程地址:待制作
  • 仓库代码地址:已有草稿,待发布
  • 线上代码地址:已有草稿,待发布
  • 主要涉及属性calc()linear-gradient::-webkit-scrollbar::-webkit-scrollbar-thumbtransitiontransform-originrepeating-linear-gradientopacityrotateX()translateY()::beforeanimation

4.6 Input 输入框

通过纯 HTML + CSS,实现 Input 输入框:

00-09.gif

  • 文章教程地址:已有草稿,待发布
  • 视频教程地址:待制作
  • 仓库代码地址:已有草稿,待发布
  • 线上代码地址:已有草稿,待发布
  • 主要涉及属性transition::placeholder:not()a ~ btransformtranslate3d()scaleopacitytransform

4.7 Rate 评分

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

00-10.gif

  • 文章教程地址:已有草稿,待发布
  • 视频教程地址:待制作
  • 仓库代码地址:已有草稿,待发布
  • 线上代码地址:已有草稿,待发布
  • 主要涉及属性display: flexflex-direction::aftera ~ b:hover:checked

4.8 Gallery 相册

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

00-11.gif

  • 文章教程地址:已有草稿,待发布
  • 视频教程地址:待制作
  • 仓库代码地址:已有草稿,待发布
  • 线上代码地址:已有草稿,待发布
  • 主要涉及属性box-shadowopacity:hoverbox-sizingfilterbrightness():first-child:last-child

4.9 Waterfall 瀑布流

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

00-12.gif

  • 文章教程地址:已有草稿,待发布
  • 视频教程地址:待制作
  • 仓库代码地址:已有草稿,待发布
  • 线上代码地址:已有草稿,待发布
  • 主要涉及属性display: flexflex-shrinkcalc()@media

五 参考文献


不折腾的前端,和咸鱼有什么区别!

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

如果小伙伴需要联系 jsliang

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

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

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

© 版权声明
THE END
喜欢就支持一下吧
点赞8 分享
评论 抢沙发
头像
欢迎您留下宝贵的见解!
提交
头像

昵称

取消
昵称表情代码图片

    暂无评论内容