贵阳花溪区HTML+CSS培训费用多少
HTML5+CSS3课程内容
一、vscode编辑器基本使用
vscode 基本使用
vscode插件安装
二、 HTML5新增标签
什么是HTML5
HTML5新增标签
多媒体音频标签
多媒体视频标签
HTML5新增input标签
HTML5新增表单属性
三、CSS3新增选择器及案例
CSS3属性选择器（上）
CSS3结构伪类选择器（上）
nth-child(n)
nth-child和nth-of-type的区别
CSS3伪元素选择器
伪元素选择器案例
四、2D转换及相关案例实现
2D转换之translate
让一个盒子水平垂直居中
2D转换之rotate
CSS3 三角
设置转换中心点
旋转中心点案例
2D转换之scale
图片放大案例
分页按钮案例
2D转换综合写法以及顺序问题
CSS3动画基本使用
动画序列
CSS3动画常见属性
CSS3动画简写
大数据热点图案例
速度曲线之steps步长
16-奔跑的熊大案例
五、3D转换和旋转木马案例
认识3D转换
3D转换translate3d
透视perspective
translateZ
3D旋转rotateX
3D旋转rotateY
3D旋转rotateZ
3D呈现transform-style
两面翻转盒子案例
3D导航栏
综合案例-旋转木马案例
浏览器私有前缀以及总结
精通HTML5+CSS3需要掌握HTML5+CSS3新特性，例如语义特性、本地存储特性、设备兼容特性、连接特性、网页多媒体特性、三维、图形及**特性、性能和继承特性、CSS3特性，可以使用HTML5+CSS3实现炫酷动画效果，熟悉VSCode编辑器基本使用。
如果我们做的H5页面只在移动端访问，这是因为REM不兼容低版本的浏览器。而如果移动端和PC端公用一套代码，建议使用流式布局。
如何做个REM响应式布局
1、从UI设计师拿到PSD设计稿,然后在样式中给HTML设定一个font-size的值，我们一般都设置一个方便后面计算的值，例如：100px
html{font-size:100px;//1rem=100px}
2、写页面，写样式
首先按照设计稿的尺寸来写样式，然后在写样式值的时候，需要把得到的像素值除以100计算出对应的REM的值。
值得注意的是：真实项目中外层盒子的宽度我们一般还是不写固定值，沿用流式布局法的思想，我们用百分比的方式布局
3、根据当前屏幕的宽度和设计稿的宽度来计算我们HTML的font-size的值
例如：设计稿宽度为640px,其中有一个部分是轮播图，它的尺寸是600*300，在样式中给HTML设定一个font-size的值为100px,则轮播图大小应该为 6rem×3rem，那如果手机屏幕宽度为375px,其font-size应该设置为多少。
375/640*100->fontsize=58.59375//此时轮播图能自适应手机屏幕大小
根据当前屏幕宽度和设计稿宽度的比例，动态计算一下当前宽度下的fontsize值应该是多少，如果fontsize的值改变了，之前设定的所有REM单位的值自动会跟着放大或者缩小。可以通过以下这段代码实现：
但如果当前屏幕宽度大于设计稿宽度，图片会被拉长而失真，所以以上代码需要稍微做些修改：
//html部分<section id="main"><div class="box"></div></section>
//js部分<script>function(){ var desW=640, winW=document.documentElement.clientwidth, ratio=winW/desW;
var oMain=document.getElementById(“main“); if(winW>desW){ oMain.style.width=desW+"px"; oMain.style.margin="0 auto";
return;}document.documentElement.style.fontSize=ratio*100+'px';}();</script>
更多培训课程，学习资讯，课程优惠等学校信息，请进入 贵阳南明区Web培训贵阳花溪区Python培训贵阳花溪区Linux云计算培训 网站详细了解，免费咨询电话：400-998-6158
