CSS 实例系列

最新推荐文章于 2024-12-11 17:06:09 发布
最新推荐文章于 2024-12-11 17:06:09 发布
阅读量504 收藏 1
点赞数
文章标签： css 前端 javascript html css3
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_41806099/article/details/128607861
版权

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/ 处获得。

20多个CSS样式表精选案例（实用、常用案例）
08-24
个人精心整理收藏，值得推荐！包括《网页设计标准尺寸》文档 搜索引擎 DIV层居中 无图片实现圆角框 精典布局等实用案例！无论新手老手都值得收藏！
html+css实例小demo
05-31
在这个“html+css实例小demo”项目中，我们可以看到一系列实例，涵盖了从基础到高级的HTML和CSS用法，同时也涉及到JavaScript、JQuery以及Vue.js等前端技术。 首先，HTML作为网页的结构语言，用于定义网页内容的...
CSS 示例
Canyun3821的博客
06-24 525
CSS学习
CSS学习记录11
最新发布
cwtlw的博客
12-11 1399
本文介绍了CSS中的display属性、overflow属性、position属性的知识。
CSS
aoju8535的博客
03-21 274
1.垂直对齐 如果你之前遇到过这个问题，你就应该知道它是多么的烦人，幸运的是，现在你可以使用CSS3变换来解决这个问题： .vc{ position: relative; top: 50%; -webkit-transform: translateY(-50%); -o-transform: translateY(-50%); ...
CSS案例
weixin_30920091的博客
07-22 795
1.美团网效果 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <head> <meta http-equiv="content-type" content="text/html; charset=UTF-8"> <t...
css基础示例代码
weixin_33798152的博客
10-30 1043
选择器 引入方式 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style type="text/css"> /*写我们的...
CSS实例代码
12-12
本资源"CSS实例代码"提供了一系列分章节的教程，旨在帮助学习者深入理解和掌握CSS的实际应用。 在CSS的学习过程中，了解和实践各种选择器是至关重要的。CSS选择器允许我们精准地定位文档中的HTML元素，例如，通过`...
css实例1-7.zip
06-18
"css实例1-7.zip"这个压缩包文件很可能包含了一系列从基础到进阶的CSS应用示例，帮助初学者逐步理解并实践CSS的各种功能。以下是这些实例可能涵盖的一些核心知识点： 1. **选择器**：CSS的选择器用于选取我们想要...
DIV+CSS实例.pdf
02-27
- **字体(font)**: CSS允许设置字体系列、大小、风格（如粗体、斜体）等，例如`font-family`、`font-size`。 - **加粗(font-weight)**: 使用`font-weight`属性来改变文字的粗细，常用值有`normal`、`bold`。 - **...
html5+css3-css动画实例1
11-06
CSS3动画允许开发者定义一系列关键帧，从而控制元素在特定时间内的状态变化，形成平滑的动画效果。这可以通过`@keyframes`规则来定义，例如： ```css @keyframes fadeIn { 0% { opacity: 0; } 100% { opacity: 1;...
CSS实例（初学者很适用的哦）
04-27
CSS实例初学者很适用的实例哦，5天让你学会div+css
简单网页例子（html+jsp+css）
06-26
简单网页例子（html+jsp+css）
CSS 实例12个
12-18
一个外部样式表文件可以应用于多个页面。当你改变这个样式表文件时，所有页面的样式都随之而改变。在制作大量相同样式页面的网站时，非常有用，不仅减少了重复的工作量，而且有利于以后的修改、编辑，浏览时也减少了重复下载代码。
27 个 CSS 案例演示和 DEMO(1)，【大牛疯狂教学】
2401_84104809的博客
04-03 1083
面试前要精心做好准备，简历上写的知识点和原理都需要准备好，项目上多想想难点和亮点，这是面试时能和别人不一样的地方。还有就是表现出自己的谦虚好学，以及对于未来持续进阶的规划，企业招人更偏爱稳定的人。万事开头难，但是程序员这一条路坚持几年后发展空间还是非常大的，一切重在坚持。CodeChina开源项目：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】前端面试题汇总JavaScript前端资料汇总一个人可以走的很快，但一群人才能走的更远。
CSS基础范例
weixin_30394981的博客
08-15 110
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Title</title> 6 <style> 7 *{ 8 ...
css小实例
Zero_ying的博客
07-08 311
界面运行效果如下所示： 界面代码如下： 由于系统会为某些元素设置默认的margin值或者padding值，所以先要清除所有元素的margin和padding值。即：*{margin 0； padding 0；}；此外还要将<li>标签中的list-style设为none。对于box1，只给了高度height的值是因为对于浏览器来说，不写宽度就默认从浏览器的最左边到最右边。 ...
CSS实例
weixin_44138723的博客
04-20 459
css实例1.浮动、div内文字(水平局中、垂直居中)、超出隐藏出现滚动条 1.浮动、div内文字(水平局中、垂直居中)、超出隐藏出现滚动条 .dialog_cont { background-color: #dbdbdb; margin-top: 20px; line-height: 30px; padding: 10px; position: relative; //相对定位 color: rgb(46, 46, 46); max-heigh
css实例
weixin_44496141的博客
04-06 131
Document –> <!--外部样式 link格式是固定的 前面两个不变基本 引入css文件--> <!--<link rel="stylesheet" type="text/css" href="01.css"> --> <!--使用@import引入css...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值