乐趣区

关于前端:CSS-实例系列

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

本 CSS 系列文章:

  1. 主推学以致用 。联合面试题和工作实例,让小伙伴们深刻体验 61 个工作常见的 CSS 属性和各种 CSS 常识。
  2. 主推纯 CSS。尽可能应用 HTML + CSS 实现学习目标,但依然有“一小部分”性能须要用到 JavaScript 常识, 适宜新人学习 + 大佬温习

如果文章在一些细节上没写分明或者误导读者,欢送评论 / 吐槽 / 批评, 你的点赞、珍藏和关注是我更新的能源 ❤

  • 更多常识分享文章可见:jsliang 的文档库
  • 本系列知识点代码可见:Demo —— all for one

一 前言

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

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

偷偷摸摸去观看 了本人我的项目中的 121 个 CSS/Less 文件,将外面的 CSS 属性都抽离了进去,原本想间接 share 过来,心愿让他看完能有所播种。

前面一想,这样突兀将知识点抛出来没啥意义,还显得十分干燥!

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

如果文章在一些细节上没写分明或者误导读者,欢送评论 / 吐槽 / 批评, 你的点赞、珍藏和关注是我更新的能源 ❤

二 指标

jsliang 在我的项目中开掘的常见 CSS 属性有 61 个,并进行了集体归类。

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

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

在理解学习这些 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>

简略来说,首页就是做了个一般的导航栏,关上页面后可见成果:

线上代码地址:

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

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

Tips:失常开发,能够通过 npm 装置 live-server 热更新代码,并配合 Visio Studio Code 等任意编辑器晦涩应用~

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

  • 更多常识分享文章可见:jsliang 的文档库
  • 本系列知识点代码可见:Demo —— all for one

四 CSS 实例

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

(或者在这个列表外面不存在的实例,也能够喊 jsliang 帮你实现)

4.1 Tab 滑动门

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

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

4.2 Flex 布局

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

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

4.3 Dropdown 下拉面板

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

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

4.4 Dialog 对话框

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

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

4.5 Envelope 给本人的一封信

通过多个 HTML + CSS + JS 成果,组合成一个比拟残缺的实例:

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

4.6 Input 输入框

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

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

4.7 Rate 评分

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

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

4.8 Gallery 相册

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

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

4.9 Waterfall 瀑布流

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

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

五 参考文献

  • Can I use – CSS 兼容性查问
  • MDN – CSS 属性介绍

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

感觉文章不错的小伙伴欢送点赞 / 点 Star。

如果小伙伴须要分割 jsliang

  • Github
  • 掘金

集体联系方式寄存在 Github 首页,欢送一起折腾~

争取打造本人成为一个充斥摸索欲,喜爱折腾,乐于扩大本人知识面的一生学习斜杠程序员。

jsliang 的文档库由 梁峻荣 采纳 常识共享 署名 - 非商业性应用 - 雷同形式共享 4.0 国内 许可协定 进行许可。<br/> 基于 https://github.com/LiangJunrong/document-library 上的作品创作。<br/> 本许可协定受权之外的应用权限能够从 https://creativecommons.org/licenses/by-nc-sa/2.5/cn/ 处取得。

退出移动版