html css教程:全面系统讲解CSS工作应用+面试一步搞定
CSS是前端开发过程中必不可少的知识点,也是最难彻底掌握的部分。
本课程系统梳理CSS中各方面的知识点
帮助前端工程师更清晰地了解实际工作中如何应用CSS技术的
更好地面对日常使用和顺利通过面试关!
第1章课程介绍
对课程整体进行介绍
1-1导学
第2章HTML基础强化
讲解HTML常见元素、版本(HTML4/XHTML/HTML5的关系)
以及HTML元素的分类和嵌套关系。关注元素默认样式和定制化。
2-1HTML常见元素和理解(1)
2-2HTML常见元素和理解(2)
2-3HTML常见元素和理解(3)
2-4HTML版本
2-5元素分类
2-6嵌套关系
2-7默认样式和reset
2-8真题
第3章CSS基础
全面讲解CSS基础知识,包括层叠样式表的基本规则和含义
选择器(分类、特性、权重、性能)、非布局样式属性
CSShack以及一些案例分析(checkbox等)。
3-1选择器(1)
3-2选择器(2)
3-3非布局样式(字体)
3-4非布局样式(行高)
3-5非布局样式(背景)
3-6非布局样式(边框)
3-7非布局样式(滚动)
3-8非布局样式(文本折行)
3-9非布局样式(装饰性属性)
3-10hack和案例(1)
3-11hack和案例(2)
3-12面试题(1)
3-13面试题(2)
第4章CSS布局
讲解布局样式属性(display/position/z-index/flex/float)
以及它们之间的关系和组合使用。
以三栏布局案例讲解常见的布局方式(float/absolute/margin/table-cell/flex)。
4-1布局简介
4-2布局方式(表格)
4-3一些布局属性
4-4flexbox布局
4-5float布局
4-6inline-block布局
4-7响应式布局(1)
4-8响应式布局(2)
4-9主流网站使用的布局方式
4-10CSS面试题
第5章CSS效果
讲解效果相关属性(box-shadow/border-radius/background/clip-path)及应用。
重点讲解多背景、多投影的应用和3D效果实践。
5-1box-shadow
5-2text-shadow_x264
5-3border-radius
5-4background
5-5clip-path
5-63D-transform
5-7CSS面试真题
第6章CSS动画
讲解动画的原理和基本概念(补间、关键帧、逐帧)
以及动画的作用(提示、引起注意、提升体验)。
然后讲解transition动画、关键帧动画和逐帧动画的实现
最后关注动画高级控制技巧(起止、循环、easing、事件)。
6-1动画介绍
6-2transition动画(1)
6-3transition动画(2)
6-4keyframes动画
6-5逐帧动画
6-6CSS面试真题
第7章预处理器
讲解预处理的作用,使用常见的两种预处理语言(Sass/Less)
讲解预处理器常用特性(嵌套、变量、Mixin、Extend、循环、模块化等)。
最后以EST为例讲解预处理库的使用。
7-1介绍
7-2less嵌套
7-3sass嵌套(1)
7-4sass嵌套(2)
7-5less变量
7-6sass变量
7-7lessmixin
7-8sassmixin
7-9lessextend
7-10sassextend
7-11lessloop
7-12sassloop
7-13lessimport
7-14sassimport
7-15预处理器框架(1)
7-16预处理器框架(2)
7-17真题
第8章Bootstrap
讲解Bootstrap的原理和基本使用方式,响应式布局的原理和使用以及Bootstrap的定制。
8-1Bootstrap介绍
8-2Bootstrap基本用法(1)
8-3Bootstrap基本用法(2)
8-4BootstrapJS组件
8-5Bootstrap响应式布局
8-6Bootstrap定制化
8-7CSS真题
第9章CSS工程化方案
讲解PostCSS和基于PostCSS的CSS工程化体系(autoprefixier/cssnext等)
然后讲解CSS模块化方案(cssmodules)
最后以webpack为工具讲解CSS文件的组织和打包构建。
9-1PostCSS介绍
9-2PostCSS插件的使用(1)
9-3PostCSS插件的使用(2)
9-4cssnext
9-5precss
9-6gulp-postcss
9-7webpack
9-8webpack处理CSS
9-9css-modules和extract-text-plugin
9-10webpack小结
9-11真题
第10章三大框架中的CSS
分别讲解在AngularReact和Vue中如何利用框架提供的CSS特性来处理CSS代码。
10-1Angular中的CSS(1)
10-2Angular中的CSS(2)
10-3Angular中的CSS(3)
10-4Vue中的CSS(1)
10-5Vue中的CSS(2)
10-6React中的CSS(1)
10-7React中的CSS(2)
10-8React中的CSS(3)
10-9React中的CSS(4)
第11章实战案例
通过一个实际项目,来真真切切了解CSS在企业中是如何应用
11-1案例介绍
11-2header
11-3banner
11-4main
11-5footer和页面调整
11-6动画
11-7progress
11-8dialog
第12章课程总结
对课程整体进行总结
12-1课程总结
发货方式
1、自动:在上方保障服务中标有自动发货的商品,拍下后,将会自动收到来自卖家的商品获取(下载)链接;
2、手动:未标有自动发货的的商品,拍下后,卖家会收到邮件、短信提醒,也可通过QQ或订单中的电话联系对方。
交易周期
1、源码默认交易周期:自动发货商品为1天,手动发货商品为3天,买家有1次额外延长3天交易周期的权利;
2、若上述交易周期双方依然无法完成交易,任意一方可发起追加周期(1~60天)的请求,对方同意即可延长。
退款说明
1、描述:源码描述(含标题)与实际源码不一致的(例:描述PHP实际为ASP、描述的功能实际缺少、版本不符等);
2、演示:有演示站时,与实际源码小于95%一致的(但描述中有"不保证完全一样、有变化的可能性"类似显著声明的除外);
3、发货:手动发货源码,在卖家未发货前,已申请退款的;
4、安装:免费提供安装服务的源码但卖家不履行的;
5、收费:额外收取其他费用的(但描述中有显著声明或双方交易前有商定的除外);
6、其他:如质量方面的硬性常规问题等。
注:经核实符合上述任一,均支持退款,但卖家予以积极解决问题则除外。
注意事项
1、荆楚虚拟会对双方交易的过程及交易商品的快照进行永久存档,以确保交易的真实、有效、安全!
2、荆楚虚拟无法对如“永久包更新”、“永久技术支持”等类似交易之后的商家承诺做担保,请买家自行鉴别;
3、在源码同时有网站演示与图片演示,且站演与图演不一致时,默认按图演作为纠纷评判依据(特别声明或有商定除外);
4、在没有"无任何正当退款依据"的前提下,商品写有"一旦售出,概不支持退款"等类似的声明,视为无效声明;
5、在未拍下前,双方在QQ上所商定的交易内容,亦可成为纠纷评判依据(商定与描述冲突时,商定为准);
5、因聊天记录可作为纠纷评判依据,故双方联系时,只与对方在荆楚虚拟上所留的QQ、手机号沟通,以防对方不承认自我承诺。
7、虽然交易产生纠纷的几率很小,但一定要保留如聊天记录、手机短信等这样的重要信息,以防产生纠纷时便于荆楚虚拟介入快速处理。
荆楚虚拟声明
1、荆楚虚拟作为第三方中介平台,依据交易合同(商品描述、交易前商定的内容)来保障交易的安全及买卖双方的权益;
2、非平台线上交易的项目,出现任何后果均与荆楚虚拟无关;无论卖家以何理由要求线下交易的,请联系管理举报。