源码小哥哥 发表于 2018-12-20 20:37:39

CSS绝对定位absolute使用视频教程


课程简介:
深入理解CSS的position:absolute声明的表现、掌握一些position:absolute的高级应用。

课程须知:
虽说是深入,实际更适合鲜肉小伙伴

课程能学到什么?
absolute基本特性的感性认知。absolute可能的理解误区纠正。absolute诸多高级技巧的应用实例。absolute在移动web布局中的大放异彩。

课程目录:
第1章 absolute和float
absolute和float是同父异母失散多年的亲兄弟-一致的包裹与破坏性。
1-1 absolute和float (02:55)
1-2 absolute的破坏性
1-3 absolute和float高尔基
1-4 absolute的包裹性
第2章 absolute和relative
absolute跟relative其实关系很不好,没有relative absolute反而更强大。
2-1 别把我和relative栓在一起 (03:59)
第3章 absolute-上辈子折翼的天使
普通元素应用position:absolute之后,会变身天使,但是“折翼天使”。
3-1 无依赖的absolute定位 (06:46)
3-2 折翼的天使
3-3 折翼天使表现特性一:去浮动
3-4 折翼天使表现特性二:位置跟随
3-5 超越overflow
第4章 强大的折翼天使
天使的折翼特性可以实现很多更健壮的局部布局。
4-1 图片图标绝对定位覆盖 (08:53)
4-2 图标定位二三事
4-3 下拉框定位最佳实践 (04:38)
4-4 下拉框定位二三事
4-5 居中以及边缘对齐定位 (07:20)
4-6 居中、边缘定位二三事
4-7 各种对齐溢出技巧实例 (05:55)
4-8 文本图标对齐与定位二三事
第5章 absolute和层级
垂直空间的显示规则以及建议。
5-1 脱离文档流二三事 (03:58)
第6章 absolute和天使的翅膀
top/right/bottom/left除了定位,还有其他表现。
6-2 天使的翅膀 (03:41)
第7章 absolute和width/height
absolute和width/height之间有很多暧昧的tips.
7-1 absolute与width和height (09:34)
7-2 无固定width/height容器内的绝对定位元素拉伸
7-3 没有宽度和高度声明实现的全屏自适应效果
7-4 高度自适应的九宫格效果
7-5 left/right拉伸和width同时存在
第8章 absolute和移动web布局
absolute网页整体布局策略,更适合移动web的布局策略。
8-1 absolute与整体页面布局 (05:57)
8-2 慕课网-绝对定位整页布局演示

**** Hidden Message *****

dushun 发表于 2019-3-17 15:53:19

很好的教程 啊啊啊

sipkoy 发表于 2019-4-20 16:48:02

CSS 的好教程 真的很给力

hui20210423 发表于 2022-11-25 23:22:30

我只是路过打酱油的

wjjnicholas 发表于 2023-2-18 14:45:53

6666666666666666666666666666

hgzhou6 发表于 2024-11-10 19:56:44

额,看不懂在说神马~@_@
页: [1]
查看完整版本: CSS绝对定位absolute使用视频教程