[网站开发入门指南95] 用sticky定位实现实用效果｜ html css 零基础入门教程
用sticky定位实现实用效果
----
网站开发指南课程源码
链接: https://pan.baidu.com/s/18vNsGTc6bkqg1eF8ZR5-gw?pwd=u3zd 提取码: u3zd
我的系列课程～就在B站课堂～
🔥 JavaScript + Nodejs前后端全栈全能课 → https://www.bilibili.com/cheese/play/ss1226
🏆 精通JavaScript和项目实战课程 → https://www.bilibili.com/cheese/play/ss6998
🎉 后端入门与实操 Shell + Linux + Nodejs → https://www.bilibili.com/cheese/play/ss6988
需要加学习交流群的，可以微信搜索加好友 sirmumumu 并备注 前端学习
好奇代码的三木
发消息
项目开发与合作，网站开发技术学习，请私信
自动连播
30.0万播放
简介
订阅合集
[重要] 课程整体介绍 ｜ 宣导片
05:16
00 为什么做这个系列
05:24
01 网站是什么
04:25
02 开始学习前先做一点准备
08:03
03 从 .html 这个文件开始说起
05:45
04 认识HTML的标签｜ tag ｜HTML元素
09:48
05 了解标签的属性 ｜ 属性的作用和意义
09:40
06 为什么浏览器认识HTML语言的标签和属性
05:58
07 语言标准没那么简单
04:01
08 正式开始学习认识标签～
04:54
09 head标签与内部的标签们
03:58
10 这么多文本标签 其实呀没那么复杂
13:15
11 body中的标签为什么需要嵌套 ｜ 如何理解页面结构
07:02
12 页面做结构专用标签们 ｜ 标签打组嵌套专用
06:33
13 媒体资源文件地址怎么写 ｜ 相对路径写法
10:16
14 了解图片标签的相关属性 | img picture source
07:33
15 了解视频标签的相关属性 | video tag
05:38
16 其他媒体资源标签 ｜ audio iframe canvas
05:12
17 了解媒体文件格式
04:56
18 使用a标签实现页面导航与跳转
08:31
19 a标签的其他属性和跳转到特定元素位置
06:11
20 MDN-网站开发技术学习一定要用的网站
07:07
21 表单元素们中的input标签
09:19
22 input的重要的那些属性
10:55
23 多行输入的textarea标签
05:00
24 下拉列表的标签们 select option
06:38
25 其他表单元素 form button fieldset legend
08:18
26 表单标签总结练习
13:06
27 稍稍了解一下表格的标签们
05:49
28 了解页面的焦点
04:52
29 标签们的复习与总结
13:05
30 练习页面结构拆解
10:45
31 最后补充一些零碎但有用的知识～HTML部分结束啦～
11:05
32 CSS开始｜先来聊聊CSS是什么
11:20
33 CSS基本写法
10:39
34 CSS的几种应用方式
05:07
35 CSS的基础选择器
07:55
36 几个最常用的属性介绍
08:59
37 一个属性设置多个值的书写逻辑
11:47
38 样式规则的后来居上
06:06
39 了解基础的选择器优先级
05:13
40 像素是什么｜图片像素｜显示器像素
07:46
41 什么是逻辑像素 物理像素 DPR
13:24
42 不同倍率屏幕上的图片显示逻辑
04:36
43 标签元素的类型差异 块级元素 行内元素
08:49
44 认识下盒模型的基础逻辑
11:03
45 设置内边距和外边距 padding margin
09:14
46 box-sizing属性与内容区域尺寸设置
08:30
47 盒模型剩下的一些问题
12:29
48 了解更多的单位与它们的基本用法 rem em % vh vw
10:06
49 色值的更多写法 16进制 rgb hsl
08:56
50 色值设置小工具与透明度问题
03:56
51 了解样式继承与全局值
08:32
52 关于字体必须要了解的几个知识点
12:02
53 几个简单常用的字体与文字的样式设置
15:33
54 字体选择与设置 font-family
10:10
55 使用字体平台的在线字体
06:54
56 使用字体文件 常用字体文件格式 @font-face
07:21
57 @font-face中的src设置多个url地址
04:08
58 @font-face的font-display font-style
07:16
59 可变字体与少量特别的中文字体的处理方式
07:16
60 换行的英文单词截断与文字溢出处理 white-space
11:47
61 文字的水平对齐和垂直对齐 text-align vertical-align
16:33
62 了解flex布局准备写个好看的页面
16:36
63 案例 | 先用flex布局搭建页面结构
12:20
64 案例 | 完成第一部分 简单的几个小元素
12:32
65 案例 | 完成第二部分 文字换行处理 输入框与小图标
15:32
66 案例 | 完成第三部分1 横线的处理 元素的水平对齐
16:17
67 案例 | 完成第三部分2 四个布局一样的小卡片
17:46
68 案例 | 案例细节调整与总结
15:56
69 案例 | 关于图标和svg的一些问题补充
12:34
70 元素的宽和高 width min-width max-width
10:28
71 元素的边框和圆角 border border-image border-radius
10:17
72 元素的背景设置1 background-image origin clip
15:34
73 元素的背景设置2 background-position size
15:12
74 元素的渐变背景设置 线性渐变 径向渐变 锥形渐变
13:12
75 多层背景设置与混合模式 background-blend-mode
09:51
76 两个背景设置的实用技巧与案例
09:22
77 元素投影设置方式 box-shadow
06:57
78 来做一个投影的案例小练习
08:59
79 元素遮罩与蒙版 mask
12:30
80 能做出很多高级效果的滤镜 filter backdrop-filter 毛玻璃效果
06:52
81 CSS中的浏览器前缀是什么
06:50
82 样式部分总算是完结了 outline list-style
03:51
83 试一试鼠标交互来实现各种变化效果 :hover 伪类选择器与 transition
09:46
84 学以致用，改造一下之前的网页案例 :hover 伪类选择器与 transition
08:47
85 开始学习布局与定位
06:14
86 先从最简单的相对定位开始 relative
10:18
87 绝对定位absolute第一部分
10:26
88 绝对定位absolute第二部分
14:04
89 固定定位fixed和粘性定位sticky
14:41
90 能实现滚动和隐藏的overflow属性
07:40
91 先认识一下z-index ｜ 元素层叠的核心属性
08:51
92 理解层叠机制的原理 z-idnex
18:09
93 用代码实际体验下层叠机制的效果 z-index
11:28
94 来做一个定位与层叠的练习
12:26
95 用sticky定位实现实用效果
04:35
96 用好display属性设置元素的模式
10:21
97 flex中的弹性 flex-grow flex-shrink flex-basis
12:51
98 flex中的剩余属性和值 align-content align-self
13:23
99 Flex布局小练习一
06:50
100 Flex布局小练习二 第一部分 使用flex-grow align-content
10:10
101 Flex布局小练习二 第二部分 margin负值的妙用
16:22
102 Flex布局小练习三 熟悉flex-grow和stretch
14:49
103 Flex布局小练习四
15:25
104 Flex布局小练习五 尝试用flex-grow实现宽度效果
11:01
105 Flex布局小练习六
04:49
106 开始学习Grid布局方式 强大的网格布局
07:25
107 Grid网格划分1 基本设置
11:17
108 Grid网格划分2 fr单位的用法
06:51
109 Grid网格划分3 auto和minmax
10:06
110 Grid网格划分4 auto fr minmax 三个要点
05:12
111 Grid网格划分5 repeat和gap
06:03
112 Grid元素放置1 网格线定位放置 grid-row grid-column
12:29
113 Grid元素放置2 自定义网格线名称
06:23
114 Grid元素放置3 预先划分区域 grid-template-areas grid布局
11:58
115 Grid练习一 实线多卡片组合布局效果
11:38
116 Grid元素放置4 隐形网格的设置
06:06
117 Grid元素与网格位置调整 justify-items align-items
09:55
118 用Grid布局实现表格案例 第1部分
16:42
119 用Grid布局实现表格案例 第2部分
10:56
120 Grid最后的补充和总结
09:32
121 了解基本的常规文档流 document flow
07:04
122 两个流-常规文档流中的文本流
07:23
123 了解浮动基本逻辑和效果
08:06
124 用代码演示float属性效果
06:10
125 浮动的两种副作用与clear属性
11:18
126 避免浮动造成塌陷的方式
07:32
127 了解BFC到底是什么
10:17
128 布局部分完结与总结 图片元素之间间隙问题处理
06:30
129 了解页面中的元素变化 transition animation
11:24
130 先学习下hover伪类选择器
04:36
131 transition如何使用
12:11
132 让变化更灵动的缓动曲线
10:41
133 steps分步变化时间函数基本逻辑
08:35
134 利用steps时间函数做类似动图效果
14:50
135 初识animation基本使用 keyframes定义关键帧
11:51
136 animation变化特别的几个属性
14:05
137 transfrom的基本二维变换 位移 缩放 旋转 倾斜
10:07
138 transfrom的坐标轴与变换中心 transform-origin
10:45
139 案例练习一 卡片交互与loading效果
10:43
140 案例练习二 进度条与无限重复的帧动画效果
08:36
141 透视perspective 让三维变换更真实
13:18
142 几个三维变换重要属性 transform-style
09:34
143 通过三维变换做一个旋转立方体 transform
14:02
144 配合变换的其他属性 perspective-origin
06:49
145 transform设置的总结与补充
10:13
146 关于滚动知识的补充 background-attachment
10:35
147 开始学习更多选择器 - 基本选择器 通用选择器 属性选择器
11:40
148 关系选择器-后代选择器 直接子元素选择器相 邻兄弟选择器 通用兄弟选择器
11:13
149 关系选择器的实际体验 代码演示
10:10
150 伪类选择器的使用逻辑 Pseudo-classes
11:17
151 常用几个伪类选择器 Pseudo-classes
11:47
152 特别的位置伪类选择器们 first-child last-child
11:46
153 挺有用的伪元素选择器 before after
15:03
154 伪元素真实的几个使用场景 before after
11:13
155 什么是特指性等级 specificity 特指性等级的计算方式
11:02
156 特指性等级的比较
06:18
157 影响CSS样式设置优先级的几个因素
06:20
158 如何查找和解决优先级问题 root empty伪类选择器
07:30
159 案例 利用hover伪类实现有趣的开关灯效果
09:06
160 案例 利用checked伪类实现点击进行开关灯控制
13:49
161 案例 利用checked伪类实现选项卡切换效果1
10:32
162 案例 利用checked伪类实现选项卡切换效果2
08:19
163 案例 利用hover伪类实现多级导航栏1
11:19
164 案例 利用hover伪类实现多级导航栏2
09:54
165 让页面适应不同显示尺寸的响应式 自适应 responsive
16:35
166 利用单位实现元素的逐步变化 响应式 responsive
11:16
167 flex与Grid布局的元素逐步变化 响应式 responsive
15:18
168 先来了解下媒体查询 media query 响应式 responsive
14:50
169 最常用的浏览器宽度查询
07:20
170 了解更多宽度查询与断点
11:48
171 设备屏幕与断点的关系 断点数值如何确定
15:20
172 移动优先和桌面优先的断点设置模式
17:51
173 小案例演示常见的断点变化设置
08:23
174 如何用手机预览开发效果
09:53
175 了解下其它几个还算实用的媒体特征
07:40
176 @import和媒体查询条件的另外设置位置
07:19
177 容器查询-另一种突然变化 container query
12:19
178 几个重要的屏幕参数概念 dpi ppi dpr 像素密度
10:43
179 为什么图片需要额外的响应式处理
08:12
180 如何准备响应式的图片文件
11:40
181 img元素实现图片响应式基本逻辑
14:17
182 img标签配合sizes属性更精确控制图片选择
13:19
183 利用picture source img组合实现图片响应式
11:19
184 你一定会用的CSS变量 一处定义多处使用
10:54
185 认识了解几个CSS函数
05:01
186 设计稿的尺寸单位与开发衔接问题
06:26
187 真实开发中的断点选择与处理
08:00
188 如何在开发中实现栅格化的响应式设计 grid布局
11:17
189 滚动相关两个属性 overscroll scroll behavior
08:10
190 几个属性 轻松实现滚动对齐 scroll-snap
10:48
191 认识下 touch-action 与 user-select
04:16
192 神秘但有非常有用的meta标签 charset name property
12:18
193 了解类名的命名模式
06:16
194 体验使用CSS代码库和框架
10:21
195 认识CSS预处理器 Sass Less
09:16
196 再来了解下浏览器开发者工具 chrome develop tool
11:22
197 智能辅助开发插件得用起来了 copilot codegeex
03:31
198 如何设置页面中标签栏小图标
10:10
199 网站代码文件如何跑到用户的浏览器上
12:37
200 分分钟搞定！快速部署上线你的网站 vercel zeabur
12:25
[指引] 接下去该学什么
06:00
项目实训课程介绍
02:04
顶部