? ③万能清除浮动法

div:after{content:" "；//插入空的伪元素--默认为行内的 clear:both；//清除浮动 display:block；//改成块内元素的 width:0；height:0； visibility:hidden；/overflow:hidden；}//占位 但不显示出来

伪元素：—不是标签也能显示增加的内容

选择符::after{content属性一起使用，定义在该对象后的内容} div：：before{content属性一起使用，定义在该对象前的内容} div：：first-letter：定义对象内第一个字符的样式 div：：first-line：定义对象内第一行文本的样式

窗口自适应–盒子根据窗口的大小进行改变：
? :root/html, body{ height:100%; }

二/三栏布局： -----可以应用于各种宽度的浏览器

定左定右，中间定位：(注意顺序)①先左右盒子浮动+定中间盒子距离窗口左右两边距离 {margin-left:200px; margin-right:200px; } ②三者都浮动+中间盒子的宽度要先定义 {width：calc(100% - 200px); }//- 左右有空格--宽度会改变 注：calc()函数：用于动态计算长度值-----支持+ - * /运算

?

7、表单进阶2

• "radio单选框" —一般用于注册页面、反馈页面中
  

  你的性别 /*一样的name表示是同一个框框内容，会相互制约，一起给后端；checked表示默认选中-可省略一样的英文*/ 男/*表示点击”男“字也是同样效果*/ 女

  
  
• "checkbox复选框" --其他都一样
  
• "file上传文件/图片等" 和 "hidden隐藏字段"
  
  
  
• "image图片按钮"-代替提交按钮submit----点击按钮提交给后端
  
  
  ?
  
• 禁用— disabled、只读— readonly
  

  注册 不满意

  
  
• "select下拉菜单"
  

  你的收获地址 "2" multiple>/*属性：size="2"控制要显示几个，默认为一；multiple 可多选*/ 广州/*value提供给后端需要用的value值*/ 深圳 汕头/*selected默认选中*/

  
  
• "textarea多行文本输入框-文本域" —会有竖直方向的滚动条
  

  textarea{width:300px; height:200px; resize:vertical; /*垂直方向重新设置大小，horizontal水平方向，默认both两个方向，none都不可随意拖动*/ } /*提前设置好的value:会显示出来---注意空格换行*/

  
  
• "fieldset字段集"–有分割线的小分组
  

  fieldset{XXX；}

  爱好

  打篮球
  跑步
  听歌
  

  
  ?
  

8、备注

• 默认后来者居上(层) ------{z-index:200; } 属性值谁大谁在上层显示
  
• 将行元素转化为块元素：①display：block；②绝对定位 absolute；③浮动 float：left；
  
• 元素水平垂直居中：
  

  ①margin：0 auto；--水平方向居中②{width:200px; height:200px; position:absolute; top:50%；left:50%; /*先移到窗口/窗口50%-50%的位置,再往回移盒子一半宽一半高*/ margin-left:-100px； margin-top:-100px； }--水平垂直居中③{text-align:center; --文本、图标水平居中 line-height:50px; (=height)}--垂直居中④父盒子{display:flex; } .center{margin:auto; }--水平垂直居中

  
  ?
  
• 浮动和绝对定位的区别：float：半脱离，文字环绕效果
  ? absolute：全脱离，不会出现文字环绕效果
  
• 一般都加 :
  

  *{/*清除所有元素的默认边距值和填充值*/ margin:0; 外边距 padding:0; 内边距 } html, body{ height:100%; }/*窗口自适应--盒子根据窗口的大小进行改变*/

  
  
• 大背景显示qq空间动态图：大盒子.box{background-image: url(./a.png)；}
  
• 行内块图标和文字对齐，让后面文字垂直居中：
  span{vertical-align:middle; }
  
• ?
  

HTML5+CSS3新增 一、HTML5新增
1、新增语义化标签 ? —容易给其他开发者或爬虫看的

header{XXX}section{YYY}---需要自己加样式header

元素	说明
header	页面(某页面的块^)的整个头部
footer	页面(某页面的块^)的整个底部脚注
section	整个页面的身体内容块
nav	页面中导航链接部分
aside	页面侧边栏
article	页面中一个个区和块
figure	独立的内容标签，配合figcaption来为其添加标题(第一个或者最后一个子元素的位置)
main	页面中的主要内容(ie不兼容)

2、音频标签、视频标签 –可替代flash(很多都不支持)
也可以使用CSS样式：video{XXX}

//可加网页服务器上或者自己文件中的音频；controls 控制栏； loop自动循环；autoplay有些可以自动播放；muted静音播放 ；poster="YYY.jpg"视频播放前的海报显示
3、表单3 【前端学习|前端学习笔记01---HTML5、CSS3、移动端前端基础学习知识点合集】< from>--将两个关联，使得text中显示datalist的对应内容
5、属性

属性	说明
autofocus	获取焦点(页面中只能有一个)
required	必填字段，填完整 否则有提示
multiple	支持多个地址、文件，用逗号隔开
pattern	正则表达式，提交时会检查是否符合给定格式
name	传输给后端的名字
value	初始值
step	移动步长

二、CSS3新增
1、解决功能属性不支持浏览器的方法 ? ①渐进增强–针对低版本浏览器进行构建页面，保证最基本的功能–再针对高级浏览器进行效果、交互等改进和追加功能达到更好的用户体验
? ②优雅降级–一开始构建完整的功能，再针对低版本浏览器进行兼容
2、新增选择器–页面布局 （1）层级选择器

.box1>div{XXX}//当前元素的子元素 .box1+div{XXX}//当前元素的后面的第一个兄弟 .box1~div{XXX}//当前元素的后面的所有兄弟"box1">1111 2222 3333

（2）属性选择器

标签【属性~=XX】{}------ “=” 表得完全匹配，“~=”为包含匹配 模糊匹配：class^=b ------开头是b的匹配 class$=b ------结尾是b的匹配 class*=b ------含有字符b的匹配[class]{XXX}---只要有class属性的元素都会被选择 div[class]{XXX}---有class属性的为div标签的元素才会被选择 [class=box1]{XXX}---只有class属性且值为box1的元素都会被选择"box1">1111 "box1">1111"box1">1111


（3）结构伪类选择器

li：first-child{XXXX}--第一个孩子 ul li：last-child{XXX} --最后一个孩子 li：nth-child(4),li：nth-child(2){XXXXX} --偶数2n(even)、奇数2n+1(odd)、前5个(-n+5) div：empty{XXXX} --没有孩子的div、onlychild只有一个孩子的div

（4）目标伪类选择器–锚点反应

div:target{background:yellow；}---刚好处于目标节点时会适用该样式--点击锚点后除跳转以外对应位置背景为黄色（还会有的其他属性样式）"#锚点名字">---跳转的对应位置 "锚点名字">---点击位置

----折叠面板

div.content{ display:none；}----表未点击锚点aaa时内容被隐藏 div.content:target{display:block；}------点击锚点aaa时内容被显示 "#aaaa">aaa "aaa" class="content">点击aaa后显示的内容(被折叠了)

（5）UI状态伪类选择器 (用户界面)-----一般用于表单

input：enabled{XXX}----已应用元素的样式(默认) input：disabled{XXX}----已禁用… input：focus{XXX}----获取焦点，会匹配此选择器 div：：selection{background:yellow；color:red；}---被选中或高亮状态时div上文字时会出现的样式 input【type=checkbox】{appearance:none; XXXXX; }---清楚原先的样式，再定义未点击时的样式 input:checked{XXX}---点击选中时的样式

（6）否定和动态伪类选择器

- 否定伪类选择器----div：not(:empty){}----除了为空的其他div - 动态伪类选择器----link、visited、hover、active

3、其他 （1）文本、盒子阴影

①text-shadow：10px 20px 30px red（ ,30px 30px 30px yellow）； （水平方向位移垂直方向位移模糊程度阴影颜色）--可同时定义多个阴影 ②box-shadow：10px 20px 30px 40px red inset；---40px表示阴影大小，inset盒子内阴影

（2）圆角边框

border-radius：10px； --px或者% （一个值，四个角都一样；两个值，左上右下、左下右上一致；四个值，顺时针方向； 若为30px/20px 表示水平/垂直移动的弧度） border-top-left-radius：10px；---定义左上角 border-radius：50%；--形成?，盒子的一半

（3）字体引入

@font-face{font-family:aaa；src:url(XXX网上字帖)；}---声明字体 div{font-family:aaa; font-size:50px; text-shadow：10px 0 0 red；}--使用该字体

（4）透明度

ul li：not(:nth-child){ opacity：0；}---除了第7个以外的其他透明 ul:hoverli{ opacity：1；}---悬停时，所有都不透明

4、其他CSS新布局 （1）怪异盒模型-CSS3新布局 可解决扩大padding时每行最后一个盒子因为空间不足掉下去：
**box-sizing：border-box； **-----根据padding的值自动修改中间内容块的大小
（2）弹性盒flex–适用于移动端布局 1）父盒子加上flex属性作用：
? — .box{display：flex；}

①会让子元素在里面横向排列（默认） ②行内元素，自动变成了块级元素，可以设宽高 ③当只有一个子元素时，margin:auto让盒子自动(水平垂直)居中

2）排列方向
? 默认主轴方向为横向，即向横向居左排列**[1234]**
? 若要将主轴改为竖直向下排列：改成竖向显示：{display:flex；flex-direction:column; }
? --column为竖直方向排列，row为横向排列
? --row-reverse横向居右(且从右往左)**[4321]**排列，column-reverse竖直向上(从下至上)排列
3）主轴侧轴对齐方式
①调整主轴横向(横向为主轴时)对齐方式：{justify-content:flex-shart；}

flex-shart横向居左[1234] flex-end横向居右[1234] center横向居中[1234] space-between横向两端对齐方式，14紧紧位于盒子两端 space-around等距离环绕，自身左右两边距离一样

②调整侧轴竖向(横向为主轴时)对齐方式：{align-items:flex-shart；}

flex-shart横向第一行[1234] flex-end横向最后一行[1234] center横向居中一行[1234]

4）折行
? 增加属性：{flex-wrap:wrap; }
? 禁止盒子内部折行显示 div{break-inside:avoid; }
5）行间距—控制折行后的行间距 {align-content:flex-shart；}（横向居左为例）

flex-shart 整块居上 紧贴大盒子顶部 flex-end整块居下 紧贴大盒子底部 center整块居中 space-between横向两端对齐方式，第一行和最后一行紧贴于盒子两端 space-around等距离环绕，自身左右两边距离一样

6）项目的属性—作用于每个小项目：
? ①对齐方式-------.div1{ align-selft:flex-shart；}

flex-shart该项目位于第一行 flex-end该项目位于最后一行，其他不影响 center该项目位于居中一行 baseline stretch拉伸高度(不设高度自动占满整个高度)

? ②调整顺序------order的值越大越靠后(默认值都为0，可为负值)
? ③**剩余宽高(窗口自适应)：**方法一–利用浮动+clac()
? 方法二—.div2{flex:1; } —只设置一个，占满剩余空间 ----若其他项目也有定义，则会根据份额进行分配
备注：项目过程：
摹客取UI图
（用ps量取这三部分及大盒子的宽高）
定义大盒子的大小、位置、使用display:flex、排列形式
分配及定义header、section、footer等小盒子的信息—CSS定义宽高及自适应flex=1
使用前端字体图标—阿里巴巴的iconfont网站下载

span .icon-XXX{font-size:200px…}----修改样式"iconfonticon-XXX">

（3）WebApp移动端布局 1）模拟器上显示分辨率/像素问题：
? css像素：设备的独立像素
? 物理分辨率：真正的物理设备像素

• 设备像素比(dpr)=物理像素/CSS像素 —两者倍率一般在真机出厂时会提供
  
• 设计稿中提供css像素375、物理像素750时要转化(宽高、圆角边框)----为了清晰的页面
  
• 一般提供一份，一般使用原则：百分比；弹性盒布局；rem布局
  
• 二倍图使用–表示用100*100的真实图片放在50**50的CSS样式中，当放大两倍时不模糊
  ?
  

2）加入meta标签，viewport视口

initial-scale=1.0 缩放比：不缩放了；user-scalable=no 不可捏放显示了

3. 纵向滚动—溢出

? 横向排放、滚动：

header ul{display:flex；overflow:auto；} --设置弹性盒，自动滚动 header ul li{ flex-shrink:0; --挤压值为0，表示不允许被挤压 line-height:45px; --定义垂直方向位置 padding:0 10px; --增加左右内间距 }

（4）多列布局 ? 项目宽高都不同，瀑布流效果

- .box{column-count：5; }--自动(折列)显示的列数 - column-gap：30px--调整各列的间距 - column-rule：2px solid red；--各列之间的边框 - column-fill：auto；--把父盒子占满后再继续分列 - column-width：500px；--调整列宽 - 禁止盒子折列时，内部分成两部分显示 div{break-inside:avoid; }- （子盒子中定义样式）div>h1{column-span:all；text-align; center；}--- all表示横跨所有列; 文本居中

（5）响应式布局 1）响应式需要一个父级作为布局容器，来配合子集元素实现变化效果
2）缺点：兼容各种设备工作量大，效率低；代码累赘，加载时间过长；一定程度上改变了网站原有的布局结构；
3）原则：①模块中的内容：挤压-拉时布局不变
? ②换行-平铺时布局不变
? ③删减-增加时布局不变
? ④模块位置变换时布局不变
? ⑤模块展示方式改变：隐藏-展开时布局改变
4）媒体查询(Media Query)：根据设备显示器的特性(视口宽度、屏幕比例、设备方向：横向或纵向)来为其设定CSS样式。约束！！！
(括号内为查询条件，width、height、color等)

@media all and (min-width:320px) and (max-width…){ body{XXXXXX} }

all为所有设备；screen为显示器、笔记本、移动端等设备；handle为便携设备(手机、平板电脑)……
(and为连接到一起，且；only为限定某种设备；not为排除某种设备)
5）横竖屏检测时的样式效果：

@media all and (orientation：portrait) {---portrait为竖屏时的样式；landscape为横屏时的样式 div{XXXXXX} }

常见的布局方案	说明
(可切换的)固定布局	以像素为单位，不同设备设计不同布局
弹性布局	以%为单位，可适应一定范围内所有尺寸的设备屏幕及浏览器宽度（最好用于PC）
混合布局	和弹性一样，但可以以像素和%为单位
响应布局	随着屏幕的宽度响应出最完美的方式，兼容所有设备；从PC端向下设计，取断点

6）bootstrap前端开发框架-组件样式插件

• 框架：一套架构，他有一套比较完整的网页功能解决方案，而且控制权在框架本身，有预制样式库、组件和插件。使用者要按照框架所规定的某种规范进行开发。
  
• 使用四部曲：
  ①创建文件结构—直接复制bootstrap文件的内容过来
  ②创建html骨架结构
  

/*要求当前网页使用IE浏览器最高版本的内核来渲染*/

? ③引入相关样式文件

? ④书写内容
? --直接拿Bootstrap预先定义好的样式来使用
? --修改Bootstrap原来的样式，注意权重问题
? --要知道它定义了哪些样式，以及这些样式能实现什么样的效果

• Bootstrap也需要一个.container布局容器（预先定好这个叻）
  ①.container类：
  –响应式布局的容器，固定宽度
  –大屏(>=1200px) 宽度定位1170px
  –中屏(>=992px) 宽度定位970px
  –小屏(>=768px) 宽度定位750px
  –超小屏(100%)
  ②.container-fluid类：
  –流式布局容器 百分百宽度
  –占据全部视口（viiewport）的容器
  –适合于单独做移动端开发
  
• 栅格系统–页面内容划分成若干等分的列
  通过行row和列column的组合来创建页面布局，你的内容就可以放入这些创建好的布局中；
  注意无法使用margin:0 10px；来控制间隔
  
  文章图片
  
  只要保证所有分数加起来等于12份，少了会空白，多出来的一列会另起一行
  

  "container">/*加响应式容器*/ "row aa">/*加行row类*/ "col-lg-3">1/*根据屏幕像素大小添加类前缀，6+4+2也可以*/ "col-lg-3">2 "col-lg-3">3 "col-lg-3 col-md-4">4/*响应式控制当为中屏时占4份*/

  
  
• 列嵌套–每次分出来的格子都可以继续分成12份
  

  "container"> "row aa"> "col-lg-3"> "row aa"> /*列嵌套时最好加1个行row 这样可以取消父元素的padding值带来的影响，而且高度会自动和父级一样高*/ "col-md-6">aa "col-md-6">bb"col-lg-3">2 "col-lg-3">3 "col-lg-3 col-md-4">4/*响应式控制当为中屏时占4份*/

  
  
• 列偏移
  

  若有两个盒子要放两端： "col-md-3">aa "col-md-3 col-md-offset-6">bb/*往右偏移的份数=12-两个盒子的份数=6*/ 若只有一个盒子要放中间： "col-md-8 col-md-offset-2">cc

  
  
• 列排序
  

  若有两个盒子，要将左边的放右边，右边的放左边： "col-md-4 col-md-pull-8">左侧 "col-md-8 col-md-pull-4">右侧/*还要往左拉4份*/

  
  
• Bootstrap响应式工具
  
  文章图片
  
  

  "container"> "row"> "col-lg-3 hidden-md">1 "col-lg-3 "> "visible-lg">Hello/*可在前面改变span的样式,只有在大屏时会显示*/"col-lg-3">3 "col-lg-3">4

  
  ?
  

（6）等比例缩放布局rem

• 区分px、em和rem
  

  px：50px em：相对于父元素的字体大小的倍数。div width:10em; rem：相对于根元素(html)字体大小的倍数。div width:10rem;

  
  
• rem布局准备工作（可用Less运算）
  动态计算，等比例的放大缩小font-size值->.box
  

  html{font-size=100px; } --也可以是16px .box{width:3.75(7.5)rem; }---多少倍的html字体大小 （使其自动转换倍数：使用px to rem插件--扩展修改基准值--F1--CSSRem）

  
  
• vw和vh—本身就是等比例缩放单位
  vh：view-height ----100vh==视口的高度
  vw：view-width ----100vw==视口的宽度
  

  div{width:100vw；/*占满窗口*/ height:100vh； }

  
  

①假设视口宽度为375px：375px=100vw ----1px=100/375=0.2667vw
? html{font-size:26.67vw；} —100px
? div{wigth:3.75rem；}
②1vw的值会随着屏幕的大小而等比例改变
? 375 1vw=3.75px
? 414 1vw=4.14px
? 768 1vw=7.68px

面试题：百分百和100vw的区别 没有滚动条时100%==100vw 有滚动条时100vw包含滚动条；100%除了滚动条以外的空间占满

（7）Grid网格布局 ? 将网页划分成一个个网格，可以任意组合不同得到网格
? display:grid; 块级网格
? display:inline-grid; 行内块级网格

• 行列属性–划分行列
  

  grid-template-rows:200px 200px 200px； grid-template-columns:00px 200px 200px；或者repeat(3,33.33%); fr片段、auto (网格自适应宽高、按比例分块)类似flex=1；的用法 grid-template-rows:100px 1fr 200px； grid-template-rows:100px auto 200px；

  
  
• 间距
  

  grid-row-gap:20px；--行间距 grid-column-gap:20px；--列间距 grid-gap:20px 20px；--复合式写法

  
  
• 区域命名与合并–盒子
  

  {grid-template-areas：'a b c' 'd e e' 'g h i'; } .box div:nth-child(5){ grid-area:e；}//ee合并 div*9

  
  
• 对齐方式
  

  竖向显示grid-auto-flow:column； 水平轴居中 --九宫格：justify-content：center；--项目： justify-items：center； 竖直轴居中align-content：center； 组合居中place-content：center center；center/*横向居中*/ space-between/*横向两端对齐方式，14紧紧位于盒子两端*/ space-around/*等距离环绕，自身左右两边距离一样*/

  
  
• 项目属性-合并
  

  .box div:nth-child(5){ grid-column-shart: 2; /*从第2条线开始到第4条线结束的区域为一整块*/ grid-column-end: 4; /*row*/ 简化：grid-column：2/4； }

  
  ?
  

5、渐变、动画、变形的状态 （1）渐变gradient ? —两个或多个颜色之间的平稳过渡–不易失真

• 线性渐变 --从”一个方向“到”另一个方向“的颜色渐变
  

  background：linear-gradient（to top，red，green，blue）；

  
  支持方向：to top、bottom(默认)、left、right(红色到绿色到蓝色为从左往右) 、bottom right(往右下角)
  支持角度的写法：90deg，
  
• 径向渐变 --从”一个点“向四周的颜色渐变
  

  background：radial-gradient（50% 50%，circle，red 0%，green 10%，blue 30%）； ①50% 50% 表示径心宽高的位置 ②颜色过渡范围：百分比表示范围0-10%为红色，10%-30%为绿色，30%开始为蓝色 ③若（red 50%，green 50%）则表示没有渐变，而是直接分成两部分 ④设置形状，circle渐变为最大的圆形；ellipse根据元素形状渐变，元素为正方形时显示的效果与circle一样 ⑤不同尺寸的渐变：size指定渐变的大小(渐变到哪里停止，它有四个值) 最好加个-webkit- closest-size：最近边；farthest-side：最远边；closest-corner：最近角；farthest-corner：最远角；

  
  
• 重复渐变
  

  重复线性渐变：background：repeating-linear-gradient（red，green 10%，blue 20%）； 重复径向渐变：background：repeating-radial-gradient（red ，green ）；

  
  
• 太极案例
  ?
  

（2）动画transition

• 动画过渡属—hover等效果时调整时间
  transition:all 2s linear 2s；
  

  /*all,height--可以定义特定某个属性也可以全部 2s --动画时间 linear --匀速 2s --延迟*/注：但display:none/block属性不支持。若要有延迟时间地效果：例 悬停单拉框内容显现 div ul{transition:all 1s； height：0px；----把他强制改成高度地显现，先隐藏高度，在慢慢出现200px overflow：hidden； } div：hover ul{height：200px；}

  
  
• 动画过渡类型
  linear 匀速；ease 逐渐慢下来；ease-in 加速；ease-out 减速；ease-in-out 先加速后减速
  贝塞尔曲线—属性值：cubic-bezier()
  
• 动画过渡单一属性
  

  all,height--单一属性：transition-property：height background；可以写多个 2s --动画过渡时间： transition-duration linear --匀速：transition-timing-function 2s --延迟过渡时间：transition-delay

  
  ?
  

（3）2d变形transform

• 2d-平移translate()
  将元素向指定的方向移动，类似于position中的relative
  

  水平移动：transform：translateX(+-tx，0) 垂直移动：transform：translateY(0，+-ty) 对角移动：transform：translate(+-tx，+-ty) /*transform属性不会造成浏览器回流重排，因为它是作为合成图层发送到GPU上，由显卡执行的渲染*/

  
  
• 2d-缩放scale()
  

  transform: scale(1.5)；---放大1.5倍---设置负值为倒置，scaleX()为设置只一个方向改变缩放中心点的位置：img{transform-origin：left top；} center、left bottom、left center…

  
  
• 2d-旋转rotate()
  

  transform: rotate(10deg)---绕中心点转正值为顺时针，负值为逆时针 transform: rotateX(10deg)---绕X轴转(3d)改变旋转中心点的位置：img{transform-origin：left top；}

  
  
• 2d-多属性值-注意顺序
  

  transform：translateX(tx，0)scale(1.5)rotate(10deg)；

  
  
• 2d-倾斜shew()
  

  skewX（）：为正值时拽着右下角，往右边拉动，形成30deg； 为负值时拽着左下角，往左边拉动，形成30deg skewY（）：为正值时拽着右下角，往下边拉动，形成30deg skew（30deg，30deg）：为正值时拽着右下角，往右下角方向拉动，形成30deg

  
  ?
  

（4）关键帧动画、轮播效果

@keyframes identifier{/*声明动画，定义一个名字*/ 0%、from{XXX}初始状态 25%{XXX} 100%、to{XXX}最终状态 }div{XXX；animation：identifier 2s linear ；}/*2秒钟从from到to状态，只执行一次*/ 若要执行无限次 多加上 infinite 属性值

• 关键帧动画-单一属性-都可以直接写在复合属性里
  

  animation-name：identifier； XXX-duration：2s； XXX-timing-function：linear； XXX-delay：5s； XXX-iteration-count：infinite；animation-direction：reverse；--normal 正常；reverse 反方向； alternate 正常方向-交替；alternate-reverse 反方向-交替 XXX-fill-mode：forwards； ---none 默认值；forwards 保持最后的画面；backwards 保持初始画面div:hover {animation-play-state: paused；}---表示鼠标悬停时动画暂停

  
  
• 关键帧动画-轮播案例：
  先定义大容器、长条大盒子(存放4+1张或背景)、图片的宽高
  –浮动–通过定义几个关键帧动画(到达每张图片的宽度位置)translateX(tx，0)–调用动画
  –最好在最后加上第一张的图片，使其更平滑（可以最后多加一帧空白，使用steps不显示最后一帧空白）
  或者使用swiper插件直接使用样式进行轮播：
  ? ①下载需要的css和js文件，引入相关文件
  

  /*放在index.css上面*/ "aa">CCC /*轮播图区域的类中粘贴网上的css代码*/

  
  ②官网找到类似案例，复制html结构，css样式 js语法
  ③根据需求定制修改模块
  
• 关键帧动画-steps 直接进行关键帧跳跃
  

animation：identifier 5s steps(1,end)；==steps-end
–直接进行关键帧跳跃；end保留当前帧，看不到最后一帧就结束了；start保留下一帧，看不到第一帧

• animate动画库
  

  引入文件 使用动画"animated bounce(动画名) infinite">

  
  ?
  

（5）3d变形 .box{transform-style：preserve-3d；perspective：900px；} --先声明一下，flat:2d；preserve-3d:3d舞台

• 3d-平移
  transform：translateZ(100px)；
  需要先设置景深，眼睛到屏幕的距离：perspective：900px
  
• 3d-旋转
  transform: rotateX(10deg)；和2d一样
  
• 3d-缩放
  transform: scaleZ(10)；也需要加景深
  
• 3d-立方体
  

6、Less语言

• Less是一门CSS预处理语言(扩展语言)，扩展了CSS的动态特性。
  Less中文网址：http://lesscss.cn/
  常见的CSS预处理器：Sass、Less、Stylus
  
• Less变量–注意大小写
  

  @变量名：值；@font14：14px；@color：pink；---定义，改这里就可以将下面的一起更改body{XX：@color；}--使用div{YY：@color；}

  
  
• Less编译–使用Easy LESS插件自动转换
  将less文件编译生成css文件，这样在html才可以使用
  
• Less嵌套
  

  html文件： XXXless文件中增加样式----less嵌套子元素的样式直接写到父元素里面 .header{XXX； a{YYY；} }编译后的css文件：.header{XXX；} .header a{YYY；}

  
  注意：如果有伪类选择器、交集选择器、伪元素选择器，我们在内层选择器前面加上&
  

  .header{ a{ &:hover{XXX；} &:：before{YYY；} } }

  
  
• Less运算—符号左右要空格
  任何数字、颜色或者变量都可以参与运算，加减乘除算术运算
  @font14：14px + 5； —如果只有一个有单位，则为这个单位；如果有两个单位，则以第一个单位为准
  img{width：82/50rem；} ----用于rem布局方便使用
  ?
  

7、移动端布局总结

• 移动端主流方案：①单独制作移动端页面；
  ? ②响应式页面兼容移动端(更麻烦些)
  
• 移动端技术选型： ①流式布局（百分比布局）；
  ? ②flex弹性布局(推荐为主)；
  ? ③rem适配布局(推荐为主)；
  ? ④响应式布局
  可以参考w3 school的学习网站：https://www.w3school.com.cn/h.asp
  

推荐阅读

• 

  社保卡发放城乡居民基本养老保险待遇 肇庆2月份起全面使用
• 

  山东麦收是几月份，麦收后种植什么经济作物
• 

  建筑工程技术主要考哪些证好考吗
• 

  海尔洗衣机不能洗涤是什么原因,主要差别在这里
• 

  手机|华为手机越做越大，越来越重；苹果则越来越小，越来越轻薄
• 

  PS制作另类高光黑白照片
• 

  掩于岁月敬而远之是什么意思
• 

  陈皮加枸杞泡水喝有什么作用
• 

  丝绸之路的意义是什么 关于丝绸之路的意义介绍
• 

  教师招聘体检哪些不合格不能通过
• 

  医生|又有患者不讲武德！医生“飞刀”手术后被举报：退还手术费还得道歉
• 

  如何把视频的声音提取成文字？视频转文字方法分享
• 

  做肝血管瘤介入有啥副作用,肝血管瘤介入手术有何并发症
• 

  如何刷机安卓手机,如何进行强制刷机?
• 

  Win10电脑的微软商店不见了怎么办？教你重新安装Microsoft Store详细方法
• 

  范忆琳个人资料 运动员范忆琳个人简介
• 

  爱玩mc官网 爱玩mc如何直播，爱玩mc联机装mod
• 

  Win7旗舰版打开文件提示安全警告怎么取消？
• 

  mongodb文件格式 mongodb写入文件
• 

  银耳泡后软粘是怎么回事

• web|CSS 3之鼠标特效
• web|CSS 3之美化菜单
• 编程语言|前端的工作越来越难找，到底是不是前端领域已经饱和了（）
• html5|前端好找工作吗（现在前端还值得入行吗？）
• CSS（line-height继承时的坑）
• html|分享 82个实用的前端开发工具
• vue|前端使用echarts实现数据可视化大屏展示
• HTML+CSS+JS小实例|HTML5+CSS3+JQuery小实例（简单又令人惊艳的hover效果登录界面）
• javascript|基于HTML5+JavaScript实现的网页录屏器设计