文章目录

一、HTML基础笔记1、基础概念：标签、元素、属性、文件结构1.1标签1.2元素1.3属性1.4文件结构2、标签2.1标题：h1~h62.2段落：p2.3段内换行：br2.4空格字符:``2.5预留格式：pre2.6行内组合：span2.7水平线：hr2.8注释2.9超链接：a2.10插入图像：img标签2.11脚标标签：sup，sub2.12区域：div2.13无序列表：ul li2.14有序列表：ol li2.14.5自定义列表：dl（定义列表） dt（大哥） dd（小弟）2.15表格2.16表单：form2.16.1：文本框、密码框：input2.16.2：提交按钮，重置按钮2.16.3：单选框，复选框2.16.4：下拉列表框2.16.5：文本域二、CSS笔记1、CSS样式1.1CSS概述1.2CSS添加方法1.3CSS选择器1.3.1标签选择器1.3.2类别选择器1.3.3ID选择器1.3.4嵌套声明1.3.5集体声明（并集选择器）1.3.6全局声明（通配符选择器）1.3.7混合1.4文字样式1.4.1 单位与颜色1.4.2 text文本1.4.3 font字体1.4.5简化font（顺序）1.5背景超链接样式1.5.1背景1.5.2超链接1.6列表，表格样式1.6.1列表List1.6.2表格2、CSS布局与定位*CSS属性书写顺序（重点）2.1盒子模型2.1.1盒子模型概念与组成2.1.2overflow属性（内容溢出盒子框时，overflow属性取值）2.1.3border属性(边框)2.1.4水平分割线2.1.5padding属性和margin属性2.1.6内边距padding2.1.7外边距margin2.2CSS定位注意点2.3文档流定位2.3.1block元素特点（块元素）2.3.2inline元素特点（行内元素）2.3.3inline-block元素（行内块元素）2.4浮动定位2.4.1float属性：left，right2.4.2清除浮动（清除浮动元素造成的影响）2.5层定位2.5.1position属性2.5.2边偏移2.5.3 relative + absolute（子绝父相）2.5.4 定位叠放次序 z-index2.5.5绝对定位的盒子居中算法2.5.6定位的特殊特性2.6元素的显示与隐藏2.6.1 display2.6.2 visibility 可见性2.6.3 overflow 溢出3、CSS33.1圆角边框border-radius（盒子四角内切圆或椭圆）3.2盒子阴影box-shadow3.3文字阴影text-shadow3.4属性选择器3.5结构伪类选择器3.6伪元素选择器3.7CSS3 盒子模型3.8图片模糊处理（了解）3.9 calc函数（了解）3.10 CSS3 过渡（重点）3.11 2D转换3.11.1 移动translate3.11.2 旋转rotate3.11.3 转换中心点 transform-origin3.11.4 缩放scale3.11.5 2D转换综合写法3.12 动画3.12.1 动画序列3.12.2 动画常见属性3.12.3 速度曲线3.13 3D 转换3.13.1 3D移动 translate3d3.13.2 透视3.13.3D 旋转 rotate3d3.13.4 3D呈现 transfrom-style4、网页制作相关内容4.1类名4.2 favicon图标制作（title前的小图标）4.3 网站TDK三大标签SEO优化4.4LOGO SEO 优化5、精灵图6、字体图标7、CSS 三角8、CSS 用户界面样式8.1 鼠标样式 cursor8.2表单轮廓和防拖拽文本域9、vertical-align 属性应用9.1图片、表单和文字对齐9.2解决图片底部默认空白缝隙问题10、溢出文字省略号显示10.1单行文字溢出省略号显示10.2多行文字溢出省略号显示11、常见布局技巧11.1 margin 负值运用11.2 文字围绕浮动元素12、HTML512.1 HTML5新增的语义化标签12.2 HTML5新增多媒体标签12.2.1 视频``12.2.2音频``12.3 HTML5新增 input 表单12.4 HTML5新增 input 属性三、移动端布局1、移动端web开发流式布局1.1视口1.1.1理想视口 ideal viewport1.1.2 meta视口标签1.2 二倍图1.2.1 物理像素&物理像素比1.2.2 多倍图1.2.2 背景缩放 background-size:宽度 高度；1.2.3 二倍精灵图1.3 移动端技术解决方案1.4 移动端特殊样式1.5 单独制作移动端页面1.5.1流式布局（百分比布局）1.6 响应式页面兼容移动端

一、HTML基础笔记

1、基础概念：标签、元素、属性、文件结构

1.1标签

由尖括号包围，比如<title>,通常成对出现<title></title>标签嵌套，不能交叉内外层标签称父子标签，同级称兄弟标签

1.2元素

开始标签，结束标签和中间的内容称为一个元素，比如:

1.3属性

标签名值1值2<img src="logo.jpg"alt="站标"/>属性1 属性2

一个标签可能有多个属性，属性先后顺序无关

1.4文件结构

.htm或.html文件

head：头部，浏览器，搜索引擎所需信息

body：主体，网页中所包含的具体内容

!DOCTYPE html文档类型：符合HTML5标准lang属性：提供给搜索引擎en英文zh中文编码方式，与保存方式不一样会出现乱码meta charset="UTF-8"meta:元数据charset属性：字符集编码方式浏览器：UTF-8是国际编码

2、标签

2.1标题：h1~h6

标题逐级字体变小

一个页面建议只有一个h1

例：

一级标题

二级标题

2.2段落：p

每个段落自动换行

段落内部文字忽略连续空格（多个空格只显示一个），也不会换行

例：

这是一段文字

2.3段内换行：br

例：

2.4空格字符: 

段落内部文字忽略连续空格

特殊字符，全小写

2.5预留格式：pre

保留空格 和换行记得pre标签自占一行，内容换行再写

2.6行内组合：span

最新中国人口调查报告指出

配合css改变字体

2.7水平线：hr

例：

2.8注释

注释可以跨行

2.9超链接：a

<a href="网址">文字或图片</a>文件地址网址#（虚拟超链接）

锚点链接：点击链接快速定位到页面中某个位置

在链接文本中，设置属性值为#名字的形式，如<a href="#two">第二集</a>

找到目标位置标签，添加id属性 = 刚才的名字，如<h3 id="two">第二集</h3>

下载链接：如果href里面地址是一个文件或者压缩包，会下载这个文件

例：

360浏览器

2.10插入图像：img标签

<img src="路径+文件名" alt="图片的替换文本"/>绝对路径，相对路径 记得/封闭

例:

2.11脚标标签：sup，sub

上脚标1

下脚标2

2.12区域：div

区域：页面的一个组成部分、一个栏目板块

2.13无序列表：ul li

HTMLCSSJS

2.14有序列表：ol li

HTMLCSSJS

2.14.5自定义列表：dl（定义列表） dt（大哥） dd（小弟）

名词1名词1解释1 名词1解释2

2.15表格

tr(table row)表格行，

td(table data)表格数据,

th(tablehead)表头单元格 加粗显示

要写出空格的话不能省略td

2.16表单：form

***表单：***是一个区域，采集用户信息

***表单元素：***用户名密码输入框，文本框密码框，按钮，单选，复选，下拉列表，文本域

2.16.1：文本框、密码框：input

<form action="数据处理网页,后端页面"><input type="text|password"></form> 文本框text密码框password区别：密码框里的文本是以*显示

2.16.2：提交按钮，重置按钮

<form>姓名：<input type="text" value="" name="myname"><input type="submit" value="提交/确定" name="submit"><input type="reset" value="重置"></form>type:提交按钮submit，重置按钮resetvalue:按钮上显示的文字

2.16.3：单选框，复选框

<form>性别：男<input type="radio" value="boy" name="gender" checked="checked"/>女<input type="radio" value="girl" name="gender"/><br /> name属性设置相同才会被选择一个爱好：<input type="checkbox" value="1" name="music" checked="checked" />音乐<input type="checkbox" value="2" name="sport"/>体育<input type="checkbox" value="3" name="reading"/>阅读</form>单选框：radio复选框：checkboxcheched:当设置checked="checked"时，该选项被默认选中

2.16.4：下拉列表框

<select><option>选项1</option><option selected="selected">选项2</option><option>选项3</option></select>select:当设置selected="selected"时，该选项被默认选中

2.16.5：文本域

<textarea name="" id="" cols="列数" rows="行数">文本</textarea>

例子：

账户：

密码：

性别： 男 女

爱好： 音乐 体育 阅读

选项1 选项2 选项3

请在此输出内容

二、CSS笔记

1、CSS样式

1.1CSS概述

CSS：层叠样式表，内容样式分离，便于修改样式

CSS语法结构：

p{font-size:12px; /*字号*/color:blue;/*文字颜色*/font-weight:bold;/*加粗*/}

p{}选择器开头表示作用于所有p标签，冒号前面属性名，后面属性值，分号结束，/**/注释

1.2CSS添加方法

行内添加 ：css样式被添加到p标签上，作用于单句

你好

内嵌样式：将CSS代码内嵌到当前页面的head标签部分，用style标签，只对当前页面有效

适用于文件少，css代码不多

<!DOCTYPE html><html lang="en"><head><style type="text/css"><!--此type属性表示当前样式以CSS文本来规定-->p{color:red;}</style></head><body><p>举个例子</p></body></html>

单独文件：link标签嵌入head标签（用link：css扩展快速生成）

优点：修改样式只需修改公共CSS文件

外部式样式表文件style.cssp{color: red;/*设置文字颜色*/}网页文件：练习<!DOCTYPE html><html lang="en"><head><link rel="stylesheet" href="css/style.css" /></head><body><p>你好哦你好你好大家</p></body></html>

优先级：多重样式可以层叠，可以覆盖

样式的优先级按照“就近原则”

行样式>内嵌样式>链接样式>浏览器默认样式

1.3CSS选择器

1.3.1标签选择器

<!DOCTYPE html><html lang="en"><head><style type="text/css">body{background-color: #ccc;text-align: center;font-size: 12px;}h1 {font:黑体;font-size:20px;}p {color:red;font-size:16px;}hr {width:200px;}</style></head><body><h1>标题</h1><hr><p>正文段落</p>版权所有</body></html>

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-u2Ftuxn4-1615992205944)(C:\Users\爸爸\AppData\Roaming\Typora\typora-user-images\image-034211429.png)]

1.3.2类别选择器

<style type="text/css">.p{font-size: 12px;}.one{font-size: 18px;}.two{font-size: 24px;}</style><body><p class="one">类别一</p><p class="one">类别一</p><p class="two">类别二</p><p class="two">类别二</p><p>普通段落中的文字</p></body>

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-r7SqcNxU-1615992205947)(C:\Users\爸爸\AppData\Roaming\Typora\typora-user-images\image-035501926.png)]

1.3.3ID选择器

<style type="text/css">#one{font-size: 18px;}#two{font-size: 24px;}</style><body><p id="one">类别1</p><p id="two">类别2</p></body>

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-jdk2QGgo-1615992205948)(C:\Users\爸爸\AppData\Roaming\Typora\typora-user-images\image-035809803.png)]

1.3.4嵌套声明

<style type="text/css">p空格span{color: red;}</style><body><p><span>天使投资</span>是投资方式的一种</p></body>

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-nCPumHt2-1615992205951)(C:\Users\爸爸\AppData\Roaming\Typora\typora-user-images\image-0203000252865.png)]

1.3.5集体声明（并集选择器）

<style type="text/css">h1,p{text-align: center;}</style><body><h1>南一师兄</h1><p>你好再见</p></body>

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-Q9qgxu7b-1615992205953)(C:\Users\爸爸\AppData\Roaming\Typora\typora-user-images\image-0203000633331.png)]

1.3.6全局声明（通配符选择器）

<style type="text/css">*{text-align: center;}</style><body><h1>南一师兄</h1><p>你好再见</p><h2>阿巴阿巴</h2></body>

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-A8KYLjjg-1615992205954)(C:\Users\爸爸\AppData\Roaming\Typora\typora-user-images\image-0203001144479.png)]

1.3.7混合

多个class选择器混合，用空格分开

<div class="one yellow left">......</div>

id和class混用

<div id="my"空格class="one yellow left"></div>

id选择器不可多个同时使用

1.4文字样式

1.4.1 单位与颜色

单位：px像素，em字符，%百分比

1.4.2 text文本

1.4.3 font字体

1.4.5简化font（顺序）

font：斜体 粗体 字号/行高 字体

font：italic bold 16px/1.5em ‘宋体’；

1.5背景超链接样式

1.5.1背景

空元素需要先定义元素的高度和宽度

background-color

background-image：url（“logo.jpg”）

background-repeat(背景图片填充方式)：

repeat（棋盘式填充)，repeat-x（填充横向一行），repeat-y（填充垂直一行），no-repeat（一张图片做背景）

background：颜色 图片 repeat

1.5.2超链接

按此顺序

a:link 普通的未被访问的链接

a:visited 用户已访问的链接

a:hover 鼠标指针位于链接的上方悬停（每一种盒子都可以用：hover）

a:active 链接被点击的时刻

：伪类选择器

a:link{text-decoration: none;color: #09f;/*未访问*/}a:visited{text-decoration: none;color: #930;/*已访问*/}a:hover{text-decoration: underline;color: #03c;/*鼠标悬停*/}a:active{text-decoration: none;color: #03c;/*按下鼠标*/}

鼠标悬停放大

a{font-size:22px;}a:hover{font-size:120%;}

1.6列表，表格样式

1.6.1列表List

前面这个点就叫列表项标志

list-style-type可取值：

1.6.2表格

表格大小：width（宽），height（高）

table{width:500px;height:200px;}

表格边框：border属性

table{border-collapse:collapse;/*合并表格边框，美化*/}

表示：tr的父元素table的奇数个子元素，不管这些子元素是tr还是th

2、CSS布局与定位

*CSS属性书写顺序（重点）

布局定位属性：display / position / float / clear / visibility / overflow自身属性：width / height / margin / padding / border / backgroud文本属性：color / font / text-decoration / text-align / white-space / break-word其他属性（CSS3）：content / cursor / border-radius / box-shadow / text-shadow / background:linear-gradient…

2.1盒子模型

2.1.1盒子模型概念与组成

概念：页面中所有元素都可以看成一个盒子，占据着一定的页面空间

盒子模型组成：

content内容

height高度

width宽度

border边框

padding内边距

margin外边距

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-KS7D4OwQ-1615992205955)(C:\Users\爸爸\Desktop\HTML\盒子模型.jpg)]

<style>#box{width: 100px;height: 100px;border:1px solid;(一个像素 实线)padding: 20px;margin: 10px;}</style>

2.1.2overflow属性（内容溢出盒子框时，overflow属性取值）

hidden超出部分不可见

scroll 显示滚动条

auto如果有超出部分，显示滚动条

2.1.3border属性(边框)

border-width:px、thin、medium、thick

border-style: dashed、dotted、solid、double

border-color:颜色

border: width、style、color

2.1.4水平分割线

.line{height:1px;width:500px;border-top:1px soild#e5e5e5;}

2.1.5padding属性和margin属性

对浏览器默认设置清零

*{margin:0;padding:0;}

书写规矩：当缩写时，上下一样，左右一样

font-size:0;/否则图间有空隙/

2.1.6内边距padding

如果盒子本身有指定width/height属性，则此时padding会撑开盒子大小，让width/height减去多出来的内边距大小即可如果盒子本身没有指定width/height属性，则此时padding不会撑开盒子大小

2.1.7外边距margin

块级元素水平居中，margin:0 auto;

必须满足两个条件：

盒子必须指定宽度（width）盒子左右外边距都设置auto

行内元素和行内块元素水平居中,给其父元素添加text-align：center；

margin的合并：垂直外边距合并，水平方向不合并，两个盒子的外边距合并成一个外边距（等于大的那个）

嵌套块元素塌陷（浮动盒子不会有外边距合并问题）

解决方案：

为父元素定义上边框border:1px solid transparent;（透明）为父元素定义内边距为父元素添加overflow：hidden；

2.2CSS定位注意点

网页布局第一准则：多个块级元素纵向排列找文档流，多个块级元素横向排列找浮动

网页布局第二准则：先设置盒子大小，之后设置盒子位置

先用标准流父元素排列上下，在用浮动左右排列

一个元素浮动，理论上其他兄弟元素也要浮动

浮动的盒子只会影响浮动盒子后面的标准流，不会影响前面的标准流

2.3文档流定位

2.3.1block元素特点（块元素）

独占一行

元素的height、width、margin、padding都可设置

常见的block元素

、

、

…

、、、、

将元素显示为block元素

a{display:block;}

inline元素a转换为block元素，从而使a元素具有块状元素的特点

宽度默认父级的100%

注意：

文字类元素内不能放块级元素 例：

,

~

2.3.2inline元素特点（行内元素）

一行可以显示多个

width、height不可设置

width就是它包含的文字或图片的宽度，不可改变（宽度由内容撑开）

常见的inline元素、

显示为inline元素：display：inline；

inline元素之间有一个间距问题，通常将inline类型转换成block等等其他类型的元素来进行显示，例如：

行内元素只能容纳文本或其他行内元素

注意：

链接里不能放链接

2.3.3inline-block元素（行内块元素）

不单独占用一行两个行内块元素之间会有间隔元素的height、width、margin、padding都可设置，例如：常见的inline-block元素，表单元素显示为inline-block元素display：inline-block；

2.4浮动定位

2.4.1float属性：left，right

使盒子向两边浮动脱离文档流原来位置，左右浮动直到左右边缘或另一浮动框的边缘。

脱离标准流控制，移动到指定位置（脱标）浮动盒子不再保留原先位置（会被其他标准流占有）任何元素都可浮动，添加浮动后具有行内块元素相似特性浮动盒子之间没有缝隙，如果父级宽度装不下多个浮动盒子，多出的盒子会另起一行对齐多个盒子设置浮动，会按照属性值一行内显示并且顶端对齐

2.4.2清除浮动（清除浮动元素造成的影响）

为什么要清除浮动？由于父级盒子很多情况下不方便给高度，但是子盒子浮动又不占有高度，最后父级盒子高度为0时，就会影响下面的标准流盒子。（父级没高度，子盒子浮动，影响下面布局）

父盒子有高度不用清除浮动

方法：

额外标签法：clear:left/right/both

在最后一个浮动元素末尾添加一个空的标签。例：

要求这个新的空标签必须是块级元素

父级添加overflow属性:overflow:hidden/auto/scroll

after伪元素：

.clearfix:after { content: ""; display: block; height: 0; clear: both; visibility: hidden; } .clearfix {*zoom: 1;} /*IE6,7专有*/

双伪元素:

.clearfix:before ,.clearfix:after {content: "";display: table;}.clearfix:after {clear:both;}.clearfix {*zoom: 1; /*ie6,7 专门清除浮动的样式*/}

2.5层定位

2.5.1position属性

默认值 static：

没有定位，元素出现在正常的流中top，bottom，left，right，z-index无效

相对定位 relative：

相对于其原来位置进行定位top，bottom，left，right，z-index有效脱离正常文档流中，但其在文档流中原位置依然存在，不脱标相对定位会压住标准流，或其他浮动盒子

绝对定位 absolute：

相对于最近一级有定位的父层进行定位如果其父层无定位或者无父元素，则将相对于浏览器边框进行定位top，bottom，left，right，z-index有效脱离正常文档流中，但与 relative 的区别其在文档流中原位置不再存在，脱标

固定定位 fixed：

相对于浏览器可视窗口进行定位top，bottom，left，right，z-index有效不会随浏览器窗口滚动条滚动而变化，脱标固定定位一定要有宽度

（固定版心右侧小技巧，下面例子）

固定定位例子

粘性定位 sticky

粘性定位例子

相对于浏览器可视窗口进行定位占有原先的位置必须添加top，bottom，left，right其中一个才有效

2.5.2边偏移

top，bottom，left，right

2.5.3 relative + absolute（子绝父相）

常用父元素relative，子元素absolute，再用top、bottom、left、right相对于父元素来进行偏移定位

2.5.4 定位叠放次序 z-index

定位叠放次序例子

数值可正负或0，默认为auto看，数值越大，盒子越上如果属性值相同，则后来居上数字后面不能加单位

2.5.5绝对定位的盒子居中算法

加了绝对定位的盒子不能通过margin：0 auto；水平居中

left 和 margin 配合使用

绝对定位水平垂直居中例子

2.5.6定位的特殊特性

行内元素添加绝对或固定定位，可以直接设置高度和宽度

块级元素添加绝对或固定定位，如果不给宽高，默认大小是内容大小

脱标的盒子不会触发外边距塌陷

浮动，绝对定位，固定定位元素不会触发外边距合并问题

浮动元素只会压住标准流盒子，不会压住标准流盒子里的文字或图片（文字环绕效果）

但绝对定位（固定定位）会压住下面标准流所有内容

2.6元素的显示与隐藏

元素显示隐藏例子

2.6.1 display

display: none;隐藏对象display; block;除了转换为块级元素之外，同时有显示元素的意思

display 隐藏元素之后，不再占有原来的位置

2.6.2 visibility 可见性

visibility: visible;元素可见

visibility: hidden;元素隐藏

visibility 隐藏元素之后，继续占有原来的位置

2.6.3 overflow 溢出

visible 默认状态，不剪切内容也不添加滚动条

hidden超出部分不可见

scroll 显示滚动条

auto如果有超出部分，显示滚动条

如果有定位的盒子，慎用overflow: hidden; 因为他会隐藏多余部分

3、CSS3

3.1圆角边框border-radius（盒子四角内切圆或椭圆）

border-rasius:水平值 垂直值(长半轴，短半轴)

参数值可为数值或百分比

圆

div{width:50px;height:50px;border:2px solid #cccborder-rasius:25px;}

左上，右上，右下，左下：border-top-left-radius，border-top-right-radius，border-bottom-right-radius，border-bottom-right-radius

3.2盒子阴影box-shadow

box-shadow:h-shadow v-shadow blur spread color inset

水平偏移（可负），垂直偏移（可负），模糊距离，阴影大小，颜色，内阴影

注意：

默认是外阴影，但不可写outset，否则阴影无效盒子阴影不占空间，不影响其他盒子排列

3.3文字阴影text-shadow

text-shadow:h-shadow v-shadow blur color

3.4属性选择器

注意：类选择器、属性选择器、伪类选择器，权重为10

3.5结构伪类选择器

区别：

nth-child 对父元素里面所有孩子排序选择（序号是固定的先找到第n个孩子，然后看看是否和E匹配）nth-of-type 对父元素里面指定子元素进行排序选择。先去匹配E，然后再根据E找第几个孩子

nth-child（n）选择某个父元素的一个或多个特定子元素

n可以是数字，关键字和公式

n如果是数字，就是选择第n个子元素，里面数字从1开始…

n可以是关键字：even 偶数，odd 奇数

n可以是公式：常见公式如下（n都是从0开始）

奇偶选择器 :nth-child(odd|even)

​ 奇数|偶数

tr:nth-child(odd){background-color:#EAF2D3;}

3.6伪元素选择器

伪元素选择器可以帮助我们利用CSS创建新标签元素，而不需要HTML标签，从而简化HTML结构

注意：

before 和after创建一个元素，但属于行内元素新创建的这个元素在文档树中找不到，所以我们称为伪元素语法：element::before{}before和after必须有content 属性before在父元素内容前面创建元素，after在父元素内容后面插入元素伪元素选择器和标签选择器一样，权重为1

伪元素选择器应用

3.7CSS3 盒子模型

box-sizing: content-box 盒子大小为 width + padding + border（默认）box-sizing: border-box 盒子大小为 width

如果盒子模型我们改了box-sizing: border-box，那么padding和border就不会撑大盒子（前提padding加border不能超过width）

3.8图片模糊处理（了解）

filter：函数(); 例如：filter:blur(5px); blur模糊处理 数值越大越模糊

3.9 calc函数（了解）

calc()此CSS函数让你声明CSS属性值时执行一些计算

width:calc(100%-80px);

±*/

3.10 CSS3 过渡（重点）

transition：要过渡的属性 花费时间 运动曲线 何时开始；

transition:width 0.5s,height 0.5s;多个属性用逗号隔开

属性：宽高，背景颜色，内外边距。所有属性变化过度用 all花费时间：单位秒（必须写单位）比如：0.5s运动曲线：默认ease（逐渐慢下来）linear（匀速）ease-in（加速）ease-out（减速）ease-in-out（先加速后减速）何时开始：单位秒，设置延迟触发时间 默认0s

谁做过渡给谁加

div{width: 400px;height: 200px;background-color: pink;transition: all 0.5s;}div:hover{width: 400px;height: 200px;background-color: skyblue;}

进度条与过渡练习

3.11 2D转换

3.11.1 移动translate

transform: translate(x,y);transform: translateX(x);transform: translateY(y);

重点：

定义2D转换中的移动，沿X和Y轴移动元素translate最大优点不会影响其他元素的位置translate中的百分比单位是相对自身元素的宽高，translate:(50%,50%);对行内标签没有效果

盒子水平垂直居中例子

3.11.2 旋转rotate

transform:rotate(度数);

rotate里面跟度数，单位是deg比如 rotate(45deg)角度为正，顺时针，负时，逆时针默认旋转中心点是元素中心点

3.11.3 转换中心点 transform-origin

transform-origin: x y;

参数x y用空格隔开x y默认转换的中心点是元素的中心点（50%，50%）可以给x y设置 像素 或者 方位名词（top bottom left right center）

旋转案例

3.11.4 缩放scale

transform:scale(x,y);

scale最大优点不会影响其他元素的位置可以设置转换中心点缩放

3.11.5 2D转换综合写法

顺序不能改transform:translate() rotate() scale();

3.12 动画

先定义动画，后调用动画

/* 1.定义动画 */@keyframes move{/* 开始状态 */0%{transform:translateX(0px);}/* 结束状态 */100%{transform: translateX(1000px);}}/* 使用动画 */div{width: 200px;height: 200px;background-color: pink;/* 2.调用动画 *//* 动画名称 */animation-name: move;/* 持续时间 */animation-duration: 2s;}

3.12.1 动画序列

0%是动画的开始，100%是完成，这样的规则就是动画序列在@keyframes中规定某项CSS样式，创建由当前样式逐渐改变为新样式的动画效果动画可改变任意多样式任意多次数用百分比规定变化发生时间，或用 ”from“ 和 ”to“，等同于 0% 和 100% 百分比，keyframe关键帧总时间划分

动画序列例子

3.12.2 动画常见属性

animation: 动画名称(必写) 持续时间(必写) 运动曲线 何时开始 播放次数 是否反方向 动画起始或者结束的状态

不包含animation-play-state

3.12.3 速度曲线

animation-timing-function：默认ease（逐渐慢下来）linear（匀速）ease-in（加速）ease-out（减速）ease-in-out（先加速后减速）

step() 步长，一段一段显示

3.13 3D 转换

近大远小

物体后面遮挡看不见

3.13.1 3D移动 translate3d

translate3d(xpx,ypx,zpx); xyz不能省略，没有就写0

translateZ沿Z轴移动，向外移动为正，向里为负

3.13.2 透视

透视写在被观察元素的父盒子上面

perspective，单位px，又称视距（眼睛到屏幕的距离）

translateZ，物体与屏幕距离，值越大我们看到的物体越大

3.13.3D 旋转 rotate3d

可让元素沿 x y z 轴或自定义轴旋转

语法：

transform: rotateX(45deg);

transform: rotateY(45deg);

transform: rotateZ(45deg);

transform: translate3d(x,y,z,deg);

元素旋转方向判断

左手准则：

左手拇指指向 x 轴正方向（即右），y 轴同理拇指指向 y 轴正方向（即下）四指弯曲方向则为元素沿 x 轴正向旋转的方向

3.13.4 3D呈现 transfrom-style

控制子元素是否开启三维立体环境transfrom-style：flat默认子元素不开启3d立体空间transfrom-style：preserve-3d；子元素开启立体空间代码给父级，影响子盒子

3D转换-两面翻转盒子

4、网页制作相关内容

4.1类名

header头部盒子logonav导航栏（实际开发中会用 li + a 做导航栏）search搜索框user个人信息

类名大全

4.2 favicon图标制作（title前的小图标）

制作favicon图标

找出图标的图片ps切图，用比特虫在线网站将 png 图片转换为 ico 格式

favicon图标放在网站根目录下

HTML页面引入favicon图标

4.3 网站TDK三大标签SEO优化

1.title 网站标题

title 具有不可替代性，是我们内页第一个重要标签，是搜索引擎了解网页入口和对网页主题归属的最佳判断点

建议：网站名（产品名）—网站介绍（尽量不要超过30个汉字）

例如：京东()-综合网购首选—正品低价、品质保障、配送及时、轻松购物

2.description 网站说明

简要说明网站是做什么的

3.keywords 关键字

6~8个关键词，关键词间用英文逗号隔开

例如：

4.4LOGO SEO 优化

logo里面首先放一个h1标签，目的是为了提权，告诉搜索引擎，这个地方很重要。

h1里面再放一个链接，可以返回首页，把logo的背景图片给链接即可。

为了搜索引擎收录我们，我们链接里面放文字（网站名称），但是文字不要显示出来。

方法1：text-indent移到盒子外面（text-indent：-9999px），然后overflow:hidden，淘宝的做法方法2：直接给font-size:0;就看不到文字了，京东的做法。

最后给链接一个title属性，这样鼠标放在logo上就可以看到提示文字。

5、精灵图

为什么需要精灵图？为了有效减少服务器接收和发送请求的次数提高页面的加载速度 CSS精灵技术，CSS Sprites，CSS雪碧

核心原理：将网页中的小背景图像整合到一张大图中，这样服务器只需要一次请求就可以了

精灵技术主要针对于小的背景图片使用。就是把多个小背景图片整合到一张大图中主要借助于背景位置来实现—backgroud-position一般情况下精灵图都是负值。（千万注意网页中的坐标：x轴右边走是正值，左边是负值，y轴往下为正，往上为负）

backgroud：url(“图片”) no-repeat x y；

6、字体图标

精灵图缺点：

图片文件比较大图片本身放大缩小会失真一旦图片制作完毕更换十分复杂

字体图标，展示的是图标，本质是字体

字体图标优点：

轻量级：一个字体图标比一系列图像小得多，减少服务器请求灵活性：可随意改变颜色，产生阴影，透明效果，旋转兼容性：几乎支持所有浏览器

注意：字体图标只能做一些简单的小图标，结构和样式复杂的还是用精灵图

使用方法：先将 fonts 文件放到页面目录下面，再用以下代码引入图标，再找到 html 文件，复制所要图标后面对应方框，再给图标声明

font-family：‘icomoon’;（参考百度例子）

<style>@font-face {font-family: 'icomoon';src: url('fonts/icomoon.eot?tny7h1');src: url('fonts/icomoon.eot?tny7h1#iefix') format('embedded-opentype'),url('fonts/icomoon.ttf?tny7h1') format('truetype'),url('fonts/icomoon.woff?tny7h1') format('woff'),url('fonts/icomoon.svg?tny7h1#icomoon') format('svg');font-weight: normal;font-style: normal;font-display: block;}</style>

7、CSS 三角

CSS三角例子

8、CSS 用户界面样式

8.1 鼠标样式 cursor

鼠标样式例子

8.2表单轮廓和防拖拽文本域

表单点击时有一个蓝色边框出现，用以下方法去掉

文本域默认右下角有个东西可以放大或拖动文本域，用以下方法去掉

<style>input,textarea{outline: none;}textarea{resize: none;}</style>

注意：文本域两个标签放在一行，中间不要有空格，不然光标定上去会有间隔

9、vertical-align 属性应用

用于设置一个元素的垂直对齐方式，只对行内元素或行内块元素有效

vertical-align: baseline | top | middle | bottom

​ 默认基线对齐|顶线对齐|中线对齐|底线对齐

9.1图片、表单和文字对齐

图片、表单属于行内块元素，默认的 vertical-align 是基线对齐。

此时给图片、表单这些行内块元素的vertical-align属性设置为middle就可以让文字和图片垂直居中对齐

9.2解决图片底部默认空白缝隙问题

bug : 图片底侧会有空白缝隙，原因是行内块元素会和文字的基线对齐。

解决方法：

给图片添加 vertical-align: top | middle | bottom（推荐）把图片转换为块级元素 display：block；

10、溢出文字省略号显示

10.1单行文字溢出省略号显示

第一步：white-space：nowrap；如果文字显示不开，也强制一行显示

第二步：overflow：hidden；溢出部分隐藏

第三步：text-overflow：ellipsis；文字溢出时用省略号来显示

10.2多行文字溢出省略号显示

11、常见布局技巧

11.1 margin 负值运用

两个盒子间 1px 的边框

margin-left：-1px；（盒子向左走1px，两个盒子边框重叠）

此时做鼠标经过盒子显示边框，不这样做的话，会有一边被压住

li：hover{/*如果盒子没有定位，则添加相对定位即可*/position：relative；/*如果盒子有定位，则利用z-index提高层级*/z-index：1；}

11.2 文字围绕浮动元素

12、HTML5

12.1 HTML5新增的语义化标签

<header>：头部标签<nav>：导航标签<article>：内容标签<section>：定义文档某个领域<asider>：侧边栏标签<footer>：尾部标签

注意：

这种语义化标准主要是针对搜索引擎的这些新标签页面中可以使用多次在IE9中，需要把这些元素转换为块级元素其实，我们移动端更喜欢使用这些标签

12.2 HTML5新增多媒体标签

12.2.1 视频<video>

当前 video 元素支持三种视频格式MP4，WebM，Ogg：尽量使用mp4格式

语法<video src="文件地址” controls="controls"></video>

<video width="320" height="240" controls> <source src="movie.mp4" type="video/mp4"><source src="movie.ogg" type="video/ogg"> 您的浏览器不支持Video标签。</video>//符合大部分浏览器

常见属性

12.2.2音频<audio>

目前, 元素支持三种音频格式文件: MP3, Wav, 和 Ogg

语法<audio src="文件地址” controls="controls"></audio>

<audio controls><source src="horse.ogg" type="audio/ogg"><source src="horse.mp3" type="audio/mpeg">您的浏览器不支持 audio 元素。</audio>

12.3 HTML5新增 input 表单

12.4 HTML5新增 input 属性

三、移动端布局

1、移动端web开发流式布局

1.1视口

视口（viewport）浏览器显示页面内容的屏幕区域。视口可分为布局视口、视觉视口、理想视口

1.1.1理想视口 ideal viewport

手机屏幕有多宽，布局视口就有多宽

meta标签

1.1.2 meta视口标签

<meta name="viewport" content="width=device-width, initial-scale=1.0,maximun-scale=1.0,minimum-scale=1.0，user-scalable=no">

1.2 二倍图

1.2.1 物理像素&物理像素比

物理像素点指屏幕显示的最小颗粒，物理真实存在

我们开发时1px不一定等于一个物理像素

pc端1px等于一个物理像素，移动端不尽相同

一个px能显示的物理像素点的个数，称为物理像素比或屏幕像素比

1.2.2 多倍图

使用倍图提高图片质量

img{/* 原始图片100*100px */width: 50px;height: 100px;}.box{/* 背景原图100*100px */background-size: 50px 50px;}

1.2.2 背景缩放 background-size:宽度 高度；

只写一个参数 肯定是宽度 高度省略 会等比缩放

background-size:500px;

里面单位可以跟% 相对父盒子而言

background-size:50%;

cover 高度和宽度等比例拉伸 完全覆盖盒子 可能有部分背景图片显示不全

background-size:cover；

contain 高度和宽度等比例拉伸 单高度或宽度铺满盒子，就停止拉伸，可能有部分空白

background-size:contain；

1.2.3 二倍精灵图

在firework里面把精灵图缩放为原来的一半再测量大小 测量坐标注意代码里面background-size也要写：精灵图原来宽度的一半

1.3 移动端技术解决方案

移动端样式初始化 normalize.css

1.4 移动端特殊样式

/* CSS3盒子模型 */box-sizing: border-box;-webkit-box-sizing: border-box;/* 点击高亮我们需要清除 设置为transparent 完成透明 */-webkit-tap-highlight-color: transparent;/* 在移动端浏览器默认的外观在ios上加上这个属性才能给按钮和输入框自定义样式 */-webkit-appearance: none;/* 禁用长按页面时弹出菜单 */img,a{-webkit-touch-callout: none;}

1.5 单独制作移动端页面

1.5.1流式布局（百分比布局）

通过设置盒子宽度为百分比来根据屏幕宽度进行伸缩max-width：最大宽度（mxa-height 最大高度）min-width：最小宽度（min-height 最小高度）

1.6 响应式页面兼容移动端