1.图像标签可以有多个属性，但必需写在标签名后面
2.属性之间不分先后顺序，标签名与属性，属性与属性之间用空格隔开
3.属性采取键值对的格式，即key="value"的格式，属性="属性值".
4.导图片
src属性是必须要写的，他决定你用哪张图片
alt是替换文本：当图片显示不出来时将文字替换到文本中，
title是提示文本，当鼠标移到图片上会出来提示
6.目录文件夹：普通文件夹，里面放了我们制作页面需要的相关素材，html文件，图片等
7.根目录：打开最外面一层是根目录
8.相对路径：图片相对文件所在位置，同级（直接用图片名），下一级（先写图片所在文件夹，再写图片名），上一级（先用../返回上一级，再写图片路径）
9.绝对路径：从盘符开始，到图片位置，与相对路径不同的是使用"\"（斜杠）隔开而不是"/".绝对路径可以使用网站上的图片地址
10.超链接：外部链接，内部链接，下载链接，网页元素链接，锚点链接和空链接。内部链接不需要hittp://开头
11.注释：<!--注释标签-->
12.特殊字符： （空格）；<（小于号）; >（大于号）;
13.表格基本语法：<table>
<tr> <th> </th> </tr>
<tr> <td> </td> </tr>
</table>
<table>:单元格范围
<tr>:行
<td>:单元格标签
<th>:表头单元格
align:表格相对周围居中
border：边框
cellpadding:单元格内文字与单元格边框的距离
cellspacing：单元格边框之间的距离
width，height：设置单元格宽高
rowspan="合并单元格个数"：跨行合并
colspan="合并单元格个数"：跨列合并
14.列表标签：<ul>无序列表（重点），里面只能放<li>标签，不能放其他标签和文字。但可以放到<li>里
<ol>有序列表（理解），里面只能放<li>标签，不能放其他标签和文字。但可以放到<li>里
<dl>自定义列表（重点），<dl>定义列表，<dt>定义项目/名字，<dd>每个项目名字,<dt>和<dd>里可以放任何标签
15.表单标签：表单域<form>
input输入表单元素，单标签,
select下拉表单元素
textarea文本域元素
16.CSS选择器:写在<head>里，<style></style>
1.标签选择器：快速为同类型标签统一设置样式，但不能设计差异化样式，只能选择全部标签。
2.class类选择器：样式点定义 结构类调用 一个或多个 开发最常用
多类名：标签属性可以有个类名，在标签class属性中写，class="类名一 类名二 类名三"; 多个类名之间用空格隔开
3.id选择器，样式#定义，结构id调用，只调用一次，别人切勿使用。
类选择器和id选择器区别：class如名字，可以多人使用。而id是身份证，只能一人使用。
4.*通配符选择器：不需要调用，自动修改所有元素样式
5.伪类选择器: :hover :link :active :focus等
17.字体属性：
font-weight ，normal：默认值，bold：变粗，100-900：400不变粗（normal），700变粗（bold）。
font-style，字体设置倾斜字体italic，或者用normal使倾斜的字体不倾斜。
18.符合属性：font:font-style font-weight font-size/line-height font-family
font-size和font-family必须有，且不能更换顺序。
19.文本属性
text-color改变文本颜色三种方法: 1.预定义的颜色值:red,green,blue
2.十六进制：#FF0000，#FF6600，#29D794
3.RGB代码：rgb（255，0，0）或rgb（100%，0，0）
text-decoration装饰文本：1.none：默认，没有装饰或取消下划线
2.underLine：下划线
3.line-through: 删除线
4.overLine：上划线
文本外观
text-indent文本缩进： text-indent：20px； 缩进20个像素距离
text-indent：2em；缩进当前字体元素两个大小的距离
line-height行间距：:行高，控制行与行之间的距离
20.引用方式
内部样式表：写到html页面里，将CSS代码抽取出来，单独放到一个<style>标签中
行内样式表：直接将style写到标签内部，适合于修改样式比较小的情况
外部样式表：样式单独的写到CSS文件中
21.emmet语法
1.输入标签名后按下tab键，直接生成标签
2.如果向生成多个相同标签加上*就可以了。
3.如果有父子级关系，可以用>，直接生成
4.兄弟级用+
5.生成带有类名或id名，直接.demo（class）或者#two（id） tab键就可以了，指定标签 标签名 .类名或标签名.id名。
6.如果生成的div类名有顺序，可以用自增符号$,例： .demo$*5;
7.如果想在生成的标签内部写内容可以用{}表示
22.选择器
1.后代选则器 元素1 元素2 { 样式声明 }
2.子元素选择器 元素1 > 元素2 { 样式声明 }
3.并集选择器 元素1，元素2 { 样式声明 } 可以用多个选择器的选择方法，中间用","隔开即可
23.链接伪类选择器
a:link 未访问的链接
a:visited 选择点击过的链接
a:hover 鼠标经过的那个链接
a:active 选择的是我们鼠标正在按下还没有弹起鼠标的那个链接
必须按照link-visited-hover-active顺序声明，否则可能没有效果
24.focus伪类选择器
input:focus{ 样式声明 }
25.元素的显示模式
1.块元素：自己独占一行
高度，宽度外边距以及内边距都可以控制。
宽度默认是容器（父级宽度）的100%
是一个容器及盒子，里面可以放行
注意：文字类的元素内不能使用块级元素，例如<p>标签中不能放<div>
同理，<h1>-<h6>等都是文字块级标签，里面也不能放其他块级元素
2.行内元素：相邻行内元素在一行，一行可以显示多个。
无法设置高和宽
默认宽度就是它本身内容的宽度
行内元素只能容纳文本或其他行内元素
链接内不能再放其他链接
特殊情况下<a>内可以放块级元素，但是给<a> 转换一下块级模式最安全
3.行内块元素：既具有块元素特点，可以设置高度，行高，外边距等
又具有行内元素，一行可以放多个。
且默认宽度就是它本身内容的宽度（行内元素特点）
26.元素显示模式转换
1.转换为块元素 display：block;
2.转换为行内元素 display：inline;
3.转换为行内块元素 display：inline-block;
27.让行高等于盒子高度则，文字居中，行高小会偏上，行高大会偏下。
28.CSS背景
1.一般情况下元素背景颜色默认值是transparent（透明）；
2.背景颜色 background-color：颜色值;
3.背景图片 background-image：none | url（url）
4. 背景平铺 repeat：背景在纵向和横向上平铺(默认)
no-repeat：背景图像不平铺
repeat-x： 背景图像在横向上平铺
repeat-y： 背景图像在纵向上平铺
background-repeat： 平铺类型;
5.方位名词
参数是方位名词 如果是方位名词，则两个值前后顺序无关，比如left top和top left效果一致
如果只写一个方位，则另外一个方位居中显示
参数是精确单位 background-position： xpx ypx;
第一个一定是x，第二个一定是y。
参数是混合单位 既有方位名词又有精确单位
但第一个一定是x，第二个一定是y
6.背景固定
background-attachment属性设置背景图像是否固定或者随着页面的其余部分滚动。
background-attachment后期可以制作视差滚动效果
background-attachment: scroll | fixed
scroll 背景图像随对象内容滚动（默认）
fixed 背景图像固定
7.背景的复合写法：
没有特定书写顺序，一般习惯约定顺序为：
background：背景颜色 背景图片地址 背景平铺 背景图像滚动 背景图片位置;
8.背景半透明
background：rgba（0,0,0,0.3）
r:红 g:绿 b:蓝 a:alpha透明度
29.CSS三大特性
1.层叠性：相同的选择器设置相同的样式，此时一个样式就会被另一个样式覆盖
原则：样式冲突，遵循就近原则，哪个里的近，执行哪个。
样式不冲突的不会重叠
2.继承性：子标签会继承父标签的某些样式，如文本颜色和字号，子承父业。
优点：恰当的使用继承可以简化代码，降低CSS样式的复杂性
子元素可以继承父元素的样式（text-,font-,line-这些元素开头的可以继承，以及color属性）
行高的继承：行高可以跟单位也可以不跟单位，不跟单位时（12px/1.5），行高是当前文字大小（12px）的1.5倍
12px/1.5 这样写更灵活
3.优先级： 继承或* 0，0，0，0
元素选择器 0，0，0，1
类选择器 0，0，1，0
ID选择器 0，1，0，0
行内选择器style="" 1，0，0，0
！important最重要 无穷大
通过权重执行优先级
1.权重是由4组数字组成但没有不会有进位
2.从左向右判断，如果数字相同，则判断下一位。
3.继承的权重是0，如果该元素没有被直接选中，不管父元素权重多高，子元素得到的权重都是0
权重的叠加
ul li 权重 0，0，0，1+0，0，0，1=0，0，0，2
.nav li 权重 0，0，1，0+0，0，0，1=0，0，1，1
30.盒子模型
一. 边框
1. border-width border-height 边框宽度和高度
2. border-color 边框颜色
3. border-style 边框样式： solid 实现边框
dashed 虚线边框
dotted 点线边框
边框简写： border： 5px solid red; 没有顺序
边框分开写法： border-top: 1px solid red; 只设置上边框，其它同理
二. 内边距（padding）
padding-left 左内边距
padding-right 右内边距
padding-top 上内边距
padding-bottom 下内边距
padding: 5px; 1个值，代表上下左右都有5像素内边距
padding: 5px 10px; 2个值，上下是5像素，左右是10像素
padding: 5px 10px 20px; 3个值，代表上内边距5像素，左右内边距10像素，下内边距20像素
padding: 5px 10px 20px 30px; 4个值，上5，右10，下20，左30
内边距设置会撑开盒子，但如果不给盒子设置宽度属性，则padding不会撑开盒子。
子标签继承父标签的宽度，若不在子标签里再次设置宽度，则padding不会撑开盒子，若设置，则会撑开
三. 外边距（margin）
margin-left
margin-right
margin-top
margin-bottom
外边距实现水平居中：盒子必须指定了宽度（width）
盒子左右外边距都设置为auto
盒子的塌陷问题
为父边框定义上边框
可以为父元素定义上内边距
可以为父元素添加overflow：hidden
清除内外边距
*{
padding：0; /*清除内边距*/
margin: 0; /*清除外边距*/
}
行内元素只设置左右内外边距，若要上下内外边距，可以将行内元素转为块元素
什么时候用margin什么时候用padding：大部分时候可以混用
31.去掉li前面的小圆点
list-style：none;
32.圆角边框
border-radius: length; 设置盒子模型四个角的弧度
length是圆角的半径像素；
border-radius：10px 40px; 左上和右下10px，右上和左下40px
border-radius: 10px 20px 30px 40px; 对应左上，右上，右下，左下
border-top-left-radius: 10px; 左上设置圆角
灵活使用可以将正方形做成圆形
33.盒子阴影
box-shadow: h-shadow v-shadow blur spread color inset;
h-shadow 必需，阴影的水平位置，允许有负值（相对盒子而言）
v-shadow 必需，阴影的垂直位置，允许有负值（相对盒子而言）
blur 可选，模糊距离
spread 可选，阴影的尺寸
color 可选，阴影的颜色，请参阅CSS颜色值
inset 可选，将外部阴影改为内部阴影
注意：1.默认的是外阴影（outset），但是不可以写这个单词，否则导致阴影无效
2.盒子阴影不占用空间，不会影响其他盒子排列
34.文字阴影
text-shadow: h-shadow v-shadow blur color
h-shadow 必需，阴影的水平位置，允许有负值
v-shadow 必需，阴影的垂直位置，允许有负值
blur 可选，模糊距离
color 可选，阴影的颜色，请参阅CSS颜色值
35.浮动
标准流：标签按照规定好的默认方式排列
1.块级元素会独占一行，从上向下顺序排列
常用元素：div，hr,p,h1~h6,ul,ol,dl,form,table
2.行内元素按照从左到右顺序排列，碰到父类元素边缘后自动换行
常用元素：span，a,i,em等
多个块级元素纵向排列找标准流，多个块级元素横向排列找浮动
设置浮动后特性：
1.脱离标准普通流的控制移动到指定位置（脱标）
2.浮动的盒子不在保留原先的位置
3.浮动的元素是相互贴靠在一起，如果父级装不下这些浮动的盒子，多出的盒子会另起一行
4.设置浮动的元素有行内块元素的特性，即设置float后，可以设置宽，高等
标准流父级元素和子元素浮动搭配使用
通栏：和浏览器一样宽的盒子
浮动的盒子只会影响后面的标准流盒子而不会影响前面的标准流盒子
为了以后可以一直往父盒子里加子盒子，所以可以不设置高。
浮动的盒子不会有外边距合并的问题
清除浮动：
选择器 {clear：属性值 }
属性值： left 不允许左侧有浮动元素
right 不允许右侧有浮动元素
both 同时清除左右两侧浮动的影响
如果父盒子本是有高度则不需要清除浮动
清除浮动后，父类会根据浮动的子盒自动检测高度，父级有了高度，就不会影响下面的标准流了
清除浮动的策略：闭合浮动，只让浮动在父盒子内不影响，不影响父盒子外面元素
清除浮动方法：
1.额外标签法（隔墙法）
1.在浮动元素后加块元素
2.父级添加overflow，将其值设置为hidden，auto，或scroll。
3.after伪元素法（大厂用的多）（一段代码）
4.双伪元素（一段代码）
36.CSS属性书写顺序
1.布局定位属性：display
2.自身属性
3.文本属性
4.其他属性
37.CSS定位
定位组成:
定位=定位模式+边偏移
定位模式:
用position属性来设置,其值有四个
static 静态定位
relative 相对定位
absolute 绝对定位
fixed 固定定位
边偏移:
边偏移就是定位盒子移动到最终位置.有top,bottem,left和right4个属性
例如: top top:80px 顶端偏移量,定义元素相对于父元素上边线的距离
静态定位
选择器 {position: static;}
静态定位按照标准流特性拜访位置,没有边偏移
相对定位
选择器 {position: relative;}
相对定位时元素在移动时,相对它原来的位置来说
相对定位原来的位置继续占有,后面的盒子依然以标准流的方式对待它(不脱标)
绝对定位
选择器 {position: absolute;}
相对于父盒子移动位置,若没有父元素则以浏览器为准,父元素没有定位则还是以浏览器为准定位
如果有多个祖父级元素,则以最近的带有定位的祖父级元素位置为准
绝对定位不再占有原先的位置(脱离标准流)
子绝父相
子盒子若想在父盒子中自由显示需要加绝对定位,而父盒子有必须有定位,
子盒子才能被父盒子约束,但父盒子又不能使用绝对定位,父类需要位置,因为绝对定位没有位置,
后面盒子会往前,因此父盒子使用相对定位.
固定定位
选择器 {position:fixed}
特点:1.以浏览器的可视窗口为参照点移动元素.
跟父元素无关
不随滚动条滚动
2.固定定位不占有位置(脱标)
固定定位也可以看做是一种特殊的绝对定位.
粘性定位
可以认为是相对定位和固定定位的混合
选择器{position: sticky; top: 10px;}
特点
1.以浏览器的可视窗口为参照点移动元素(固定定位特点)
2.粘性定位占有原有的位置(相对定位特点)
3.必须添加top,left,right,bottom其中的一个才有效
叠放次序z-index
选择器{z-index: 1;}
数值可以是正整数,负数或0,默认是auto,数值越大,盒子越靠上
如果都没有设数字或数字一样,则后来者居上.
数字后面不能加单位
只有定位的盒子才有z-index属性
定位的拓展
定位居中
行内元素添加绝对或者固定定位,可以直接设置高度和宽度
块级元素添加绝对或者固定定位,如果不给宽度或者高度,默认大小是内容的大小
脱标的盒子不会触发外边距合并问题
浮动的元素不会压住文字,而绝对定位或固定定位会压住下面标准流的所有内容
一个盒子既有left又有right，则执行left。既有top又有bottom，则执行top
38.元素的显示与隐藏
display属性（重点）
display: none; 隐藏对象
display：block; 除了转换为块级元素之外，同时还有显示元素的意思
display隐藏元素，不再占有原来位置，并没有删除
visibility可见性
visibility: visible; 元素可视
visibility: hidden; 元素的显示与隐藏
visibility隐藏元素后，继续占有原来位置
如果隐藏元素想要原来位置，就用visibility:hidden
如果隐藏元素不想要原来位置，就用display：none（用处更多 重点）
overflow溢出
overflow:visible; 显示
overflow:hidden; 超出部分不显示，但并不是删除超出部分
overflow:scroll; 添加滚动条，超出部分可以滚动查看
overflow:auto; 在需要的时候自动添加滚动条
39.精灵图
为什么要用精灵图？
为了有效的减少服务器接收和发送请求的次数，提高网页的加载速度
代码例子
<style>
.box {
width: 50px;
height: 50px;
margin: 100px auto;
background: url("img/sprt.png") -100px -100px;
}
</style>
精灵图缺点
1.图片本身较大
2.放大缩小会失真
3.一但图片完成想要跟换很困难
40.字体图标
可以是方框图标，也可以用前面的代码
展示的是图标，本质属于字体。
简单的图片可以用字体图标，而复杂的不行，所以字体图标不能替代精灵图
下载字体图标网站：iconmoon和iconfont
追加图标：在网站上点击import icons选择selection.json文件，然后选择想要图标进行下载，最后将原来图标文件扔掉
41.鼠标样式
格式
li {cursor : pointer}
属性值 描述
default 小白（默认）
pointer 小手
move 移动
text 文本
not-allowed 禁止
42.CSS用户界面样式
1.轮廓线outline
input {outline：none;}
2.文本域防止拖拽文本域
textarea {resize：none;}
文本域书写最好在一行，否则网页文本域中会出现开头有空格的情况
43.vertical-align属性应用
可以使图片表单和文字对齐
默认基线对齐
只对行内或行内块元素有效
格式： img {vertical-align：middle;}
middle 中线对齐
top 顶线对齐
bottom 底线对齐
给图片加边框时底部经常会有空隙，那是因为图片与文字默认基线对齐，只要添加其它对齐方式即可
也可以将元素转换为块级元素，因为块级元素没有vertical-align属性
44.溢出的文字省略号
单行文字省略号步骤：
div {
先强制一行内显示
white-space: nowrap;
溢出部分隐藏
overflow:hidden;
文字用省略号代替超出部分
text-overflow:ellipsis;
}
多行文字省略号步骤：
div{
一段固定代码
}
可以选择第几行.
45.margin负值的的巧妙运用
使用margin-left：-1px;做出1px的边框
使鼠标经过将边框变色
如果盒子没有定位，则鼠标经过添加相对定位即可
如果如果有定位，则利用z-index提高层级
46.文字围绕浮动元素
在父盒子里直接加文字，给放图片的子盒子加浮动
47.CSS初始化
CSS初始化是指重设浏览器的样式（也称CSSreset）
就是设置自己最初想要的标签或图片等样式
例如： * {
padding：0;
margin: 0;
}
48.HTML5的新特性
1.HTML5新增的语义化标签
<header>：头部标签
<nav>：导航标签
<article>：内容标签
<section>：定义文档某个区域
<aside>：侧边栏标签
<footer>：尾部标签
这些标签主要针对搜索引擎的
但这些标签在IE9里面不是块级元素，需要自己转换
49.HTML5新增的多媒体标签
1.视频<video>
当前<video>元素支持三种视频格式：MP4,ogg,WebM 尽量使用MP4格式
语法：
<video src="文件地址" controls="controls"></video>
视频<video>常见属性
属性 值 描述
autoplay autoplay 如果出现该属性，则视频在就绪后马上播放。
controls controls 如果出现该属性，则向用户显示控件，比如播放按钮。
width pixels 设置视频播放器的宽度。
height pixels 设置视频播放器的高度。
loop loop 如果出现该属性，则当媒介文件完成播放后再次开始播放。
muted muted 规定视频的音频输出应该被静音。
poster URL 规定视频下载时显示的图像，或者在用户点击播放按钮前显示的图像。
preload preload 如果出现该属性，则视频在页面加载时进行加载，并预备播放。如果使用 "autoplay"，则忽略该属性。
src url 要播放的视频的 URL。
2.音频<audio>
<audio>支持的三种文件格式：MP3，Wav，Ogg。
语法：
<audio src="someaudio.wav">
您的浏览器不支持 audio 标签。
</audio>
音频<audio>常见属性
属性 值 描述
autoplay autoplay 如果出现该属性，则音频在就绪后马上播放。
controls controls 如果出现该属性，则向用户显示控件，比如播放按钮。
loop loop 如果出现该属性，则每当音频结束时重新开始播放。
preload preload 如果出现该属性，则音频在页面加载时进行加载，并预备播放。如果使用 "autoplay"，则忽略该属性。
src url 要播放的音频的 URL。
3.input类型
input表单需要在<form> <from/>表单域里书写
input表单可以现在人输入的内容
格式
<input type="email"/>
常用属性
属性值 说明
type="number" 限制用户输入number类型数据
type="tel" 手机号码
type="search" 搜索框
placeholder="提示文本" 表单的提示信息
multiple="multiple" 可以多选文件提交
50.CSS3的新特性
1.属性选择器（权重 10）
写法 所选的元素
标签[属性] { } 具有该属性的该标签元素
标签[属性=值] { } 具有该属性值的该标签元素 （重点）
标签[class^=值的相同开头] { } 具有相同开头值的该标签元素
标签[class$=值的相同结尾] { } 具有相同结尾值的该标签元素
类选择器，伪类选择器和属性选择器的权重都是10
2.结构伪类选择器（权重 10）
E:first-child 选择父元素里第一个子元素
E:last-child 选择父元素里最后一个子元素
E:nth-child(n) 选择父元素里第n个子元素
E:nth-child(n) 执行时首先看： nth-child(n) 之后回去看前面E,父元素中有其他类型的元素时，不建议用这个
n可以是even(偶数)，也可以是odd（偶数），可以直接将奇数或偶数个元素直接选取出来
如果在括号里写n，则意为选择所有元素
括号里也可以写公式：
公式 含义
2n 偶数
2n+1 奇数
5n 5的倍数
n+5 从第5个开始
-n+5 前5个
无论公式是什么，其中的n都是代表从0开始一直加一的数
E：first-of-type
E: last-of-type
E: nth-of-type(n)
E: nth-of-type(n) 执行时先看E再看nth-of-type(n)
3.伪元素选择器（权重 1）
和标签选择器的权重都是1
可以帮助我们利用CSS创建新标签元素，不需要HTML,从而简化了HTML结构
选择符 简介
::before 在元素内部的前面插入内容
::after 在元素内部的后面插入内容
两者相当于一个盒子，但是它们是行内元素，不能设置大小，除非转化为块元素
div::before{ content:"内容" } （权重为2）
div::after{ content:"内容" }
content属性必须要写
4.CSS3盒子模型
通过box-sizing来指定盒模型，有两个值：conttent-box，border-box，计算盒子大小的方式发生了改变
1.box-sizing：content-box 盒子大小为width+padding+border（以前默认的）
2.box-sizing：border-box 盒子大小为width
5.CSS3其他特性
1.CSS3滤镜filter
filter：函数（）; 例如：filter：blur（5px）; blur模糊处理，数值越大越模糊
2.CSS3函数calc
width：calc（100%-80px）; 子盒子永远比父盒子少80px
括号里可以用+ - * /
6.CSS3过渡（重点）
谁要过度给谁加transition
语法：
transition: 要过度的属性 花费时间 运动曲线 何时开始;
属性：想要变化的CSS属性，如果想要所有属性都变化，那么属性写all就行了
花费时间：单位是秒，例如0.3s
时间曲线：默认是ease（可以省略）
何时开始：单位是秒，可以设置延迟触发时间，默认是0s（可以省略）
狭义的HTML5 CSS3
HTML5结构标签本身
CSS3相关样式
品优购项目知识点
1.网站favicon图标
步骤：
1.制作favicon图标
2.favicon图标放到网站根目录下
3.HTML页面引入favicon图标
2.网站TDK三大标签SEO优化（搜索引擎优化）
SEO目的是对网站进行深度优化，从而帮助网站获取免费流量，进而在搜索引擎上提高排名
1.title网站标题
建议：网站名（产品名）-网站介绍 （不超过30字）
2.description网站说明
简要说明我们网站主要是做什么的
<meta name="description" content="说明内容"/>
3.keywords关键字
keyword是页面关键词，是搜索引擎的关注点之一
最好限制为6-8个
<meta name="keywords" content="关键字1，关键字2，关键字3"/>
3.LOGO SEO优化
1.logo里首先放一个h1标签,目的是为了提权,告诉搜索引擎,这个地方很重要
2.h1里再放一个链接,可以返回首页,吧logo背景给链接
3.链接里放文字,但不要显示出来
方法一:text-indent移动盒子外面(text-indent: 9999px),然后overflow:hidden,淘宝的做法
方法二:直接给font-size:0; 就看不到文字了,京东的做法
4.最后给链接一个title属性,这样鼠标放到logo上就可以看到提示文字了.
51.Web服务器
本地服务器：自己的电脑设置为本地服务器
远程服务器：别的公司为我们提供的一台电脑，只要把网站项目传到这太电脑，任何人都可以利用域名（网址）访问我们的网站了
免费的远程服务器： http://free.3v.do/
步骤：
1.去免费空间网站注册账号
2.记录下主机名，用户名，密码，域名。
3.利用cutftp软件上传网站到远程服务器
4.在浏览器中输入域名，即可访问我们的品优购网站了。
52.2D转换（transform）
移动：translate
旋转：rotate
缩放：scale
1.2D转换之移动translate
语法
transform:translate(x,y); 或者分开写
transform:translateX(n);
transform:translateY(n);
括号里如果是百分比，则这个移动距离是按照长宽的百分比移动
translate 对于行内元素是无效的
优点：保留原来位置，所以不会影响其他盒子位置
盒子移动方法：定位 盒子外表距 2d转换移动
2.2D转换之旋转rotate
语法
transform:rotate(度数)
重点
rotate里跟度数，单位是deg 比如rotate（45deg）
角度为正时，顺时针。负时，为逆时针
默认旋转的中心点时元素的中心点
设置转换中心点
transform-origin:x y;
x,y可以给像素或者方位名词（top bottom left right）
默认的是 50% 50% 等价于center center;
3.2D转换之缩放scale
语法
transform:scale(x,y);
x，y写为数字不带单位，数字1就是一倍，2就是两倍的意思
只写一个参数时，则是等比缩放
优势：
相比于直接调节width和height，这个方法会向上延伸，可以设置缩放中心点，而且不影响其他盒子
2D转换的综合写法顺序
格式： transform:translate() rotate() scale()...等
注意： 其顺序会影响转换效果（先旋转会改变坐标轴方向）
当我们同时有位移和其他属性的时候，记得要将位移放到最前
53.动画
1.用keyframes定义动画（类似定义类选择器）
定义动画（CSS样式）：
@keyframes 动画名称 {
0% {
width:100px;
}
100%{
width:200px;
}
}
元素使用动画：
animation-name：动画名称;
animation-duration：持续时间;
注意：
1.可以做多个状态的变化
2.百分比要是整数
3.里面的百分比是持续时间的划分
2.动画常用属性
anmiation-timing-function:ease; 运动曲线,默认是ease，staps值可以分步
animation-delay: 1s; 何时开始
animation-interation-count: 重复次数 iteration重复的 count次数 infinite无限
简写：
animation: name duration timing-function delay iteration-count direction;
前面两个属性一定要写
简写属性里不包括animation-play-sate:pused;经常和鼠标经过等配合使用
若设置多个动画，则将两动画属性用逗号链接即可
54.3D转换
1.3D移动translate3D
各轴正方向
x轴：水平向右
y轴：竖直向下
z轴：垂直屏幕向外
translateZ后面的单位我们一般跟px
简写：
transform：translate3D（x，y，z）;
x，y，z是不能省略的，如果没有就写0
2.透视perspective
perspective: 像素;
透视写在被观察元素的父盒子的上面，代表眼睛的位置
3.3D旋转rotate3D
transform:rotateX(45deg): 沿着x轴正方向旋转45度2
transform:rotateY(45deg): 沿着y轴正方向旋转45度
transform:rotateZ(45deg): 沿着z轴正方向旋转45度
transform:rotate3d(x，y，z，deg): 沿着自定义轴正方向旋转deg为角度（了解即可）
左手准则
左手的拇指指向x轴的正方向
其余手指的弯曲方向就是该元素沿着x轴旋转的方向
4.3D呈现tranfrom-style
控制子元素是否开启三位立体环境
transform-style: flat子元素不开启3d立体空间（默认的）
transform-style: preserve-3d; 子元素开启立体空间
代码写给父级，但是影响的是子盒子
这个属性很重要，后面必用
注意：3D模型要时刻牢记中心点和中心轴在哪
