pc端网站代码
技术栈：html结构+css布局+h5c3动画
目录结构：
图片文件夹：img
样式文件夹：css
产品类图片文件：upload
字体类文件夹：fonts
脚本文件夹：js
样式文件的分类：初始化css（css reset）让浏览器风格统一，把常用的初始化语句放入base.css里面，把一些公共的样式，放入common.css里面
1、网站ico图标
1）：使用ico图标
首先把favicon.ico这个图标放到根目录下，然后在html里面，head之间引入代码
<link rel="shortcut icon" href="favicon.ico" type="image/x-icon"/>
2）：制作ico图标
首先把我们想要的切成图片，要把图片转换为ico图标，要借助于第三方转换网站： http://www.bitbug.net/。 比特虫
2、网站优化三大标签
title description keyword
网页title标题：title具有不可替代性，是我们的内页第一个重要标签，是搜搜引擎了解网页的入口，
3、字体图标
ui设计，格式为svg ， 当ui设计人员给我们svg文件的时候，我们需要转换成我们页面能使用的字体文件，我们需要生成的是兼容性的适合各个浏览器的
使用字体图标：1）、首先把font文件夹放入我们的根目录下（fonts文件夹） 2）、在html标签内里面添加结构
3）、在样式里面声明字体，告诉别人我们自己定义的字体，要注意路径的问题
@font-face {
font-family: 'icomoon';
src: url('fonts/icomoon.eot?7kkyc2');
src: url('fonts/icomoon.eot?7kkyc2#iefix') format('embedded-opentype'),
url('fonts/icomoon.ttf?7kkyc2') format('truetype'),
url('fonts/icomoon.woff?7kkyc2') format('woff'),
url('fonts/icomoon.svg?7kkyc2#icomoon') format('svg');
font-weight: normal;
font-style: normal;
}
4、pc端要注意版心
5、常用布局：ul li div a dl+dt+dd 左浮动，有浮动，定位 margin padding
6、audio音频标签 video视频标签 h5新增表单属性 requires必填验证
7、属性选择器：
E[att] 选择具有att属性的E元素
E[att = "val"] 选择具有att属性且属性值等于val的E元素
^匹配开头 $匹配结尾 *匹配任意位置
一、伪类选择器
E:first-child匹配父元素中的第一个子元素E
E：last-child 匹配父元素中最后一个E元素
E：nth-child(n) 匹配父元素中的第n个子元素E
二：伪元素种类
E::before 在E元素前插入一个元素
E::after 在E元素后插入一个元素
写法： div：：before{
content:'我’
display : inline-block;
width:100px;
height:100px;
background-color:pink
}
注意事项：before和after必须有content属性，before在内容的前面，after在内容的后面
before和after创建一个元素，属于行内元素
三、2D转换（变换）transform
转换transform是css3中具有颠覆性的特征之一，可以实现元素的位移，旋转，变形，缩放
缩放：scale，移动：translate ,旋转：rotate 倾斜：skew
移动使用步骤
1、给元素添加转换属性 transform
2、属性值为translate(x,y),如transform：translate（50px，50px）
旋转的使用
1、给元素添加转换属性transform
2、属性值为rotate(角度） 如 transform:rotate(30deg) 顺时针方向旋转30deg，角度为正时，顺时针，角度为负时，逆时针
转换中心transform-origin了解
1、该属性可以修改元素旋转的时候的中心点
origin：原点，如果与rotate旋转配合使用，就是旋转的中心点，如果与scale配合使用，就是缩放的基准点
语法：transform-origin:x y
注意：
注意后面的参数x和y用空格隔开
xy默认转换的中心点是元素的中心点（50% 50%）
还可以给x y设置像素或者方位名词 （top bottom left right center）
常见写法：
transform-origin:50% 50%;默认值，元素的中心位置，百分比是相对于自身的高度和宽度
transform-origin:top left ; 左上角，和transform-origin：0 0相同
scale缩放的使用
1、给元素添加转换属性 transform
2、转换的属性值为scale（宽的倍数，高的倍数） 如 transform:scale(2,3)
sacle缩放最大的优势，可以设置转换中心点缩放，默然以中心点缩放的，而且不影响其他盒子
综合写法
1、同时使用多个转换，其格式为：transform:translate() rotate() scale() ...等（空格隔开就行）
2、其顺序会影响转换的效果（先旋转会改变坐标轴的方向）
3、所以，当我们同时有位移和其他属性的时候，记得将唯一放到最前
四、动画animation
动画是css3中具有颠覆性的特征之一
使用步骤
1、在css中定义动画函数
2、给目标元素调用动画函数
1、1使用关键字@keyframes + 动画名，定义动画函数
1、2在动画函数定义帧动画
0% 动画一开始的样式
50% 动画执行到一半的时候的样子
100% 动画执行完毕之后的样子
2、1调用动画 animation-name：动画名
2、2定义动画的持续时间 animation-duration：2s；
@keyframs 规定动画
animation 所有动画属性的简写属性，除了animation-play-state属性
animation-name 规定动画名称（必须写）
动画的复合写法
animation：动画名称 持续时间 运动曲线 何时开始 播放次数 是否反方向 动画起始或者结束状态
注意：前面两个属性必须要写，后面的可以省略
多个动画用，隔开就行
动画结束时间 animationend 元素在动画结束之后，会自动触发这个事件
一、3D效果
3D特点：近大远小
3纬坐标：
1、x轴水平向下：x右边是正直，左边是负值
2、y轴垂直向下：y下面是正直，上面是赋值
3、z轴：垂直屏幕，由屏幕里面指向屏幕外面，注意：往外面是正值，往里面是负值
移动translate3d
语法：transform：translate3d（x,y,z）其中 xyz分别指要移动的轴的方向
-
translform:translateX(100px) 仅仅是移动在x轴上移动
-
translform:translateY(100px) 仅仅是移动在Y轴上移动
-
translform:translateZ(100px) 仅仅是移动在Z轴上移动
因为z轴是垂直屏幕，由里指向外面，所以默认是看不到元素在z轴的方向上移动，想要看到，可以使用下面的透视属性设置
透视perspective
注意近大远小就行
perspective与translateZ：perspective是给父元素添加的，而translateZ给自己添加的
我们可能会碰到这样的情况，一个父盒子中有多个子盒子，我们给父盒子设置一个固定的视距，然后子盒子设置不同的translateZ就行
注意：物体想实现3D效果，必须添加透视perspective
如何使用：父元素添加一个固定的perspective，子元素在添加translateZ，才会有3D效果 ， 必须配合使用
3D旋转：rotate3d
3d旋转指可以让元素在3纬平面内沿着x轴，y轴，z轴或者自定义轴进行旋转
语法：transform:rotateX(45deg) 沿着x轴正方向旋转
3d呈现transform-style
transform-style控制子元素是否开启三维立体环境
transform-style：flat子元素不开启3d立体空间 默认的 （flat：平的，平面）
transform-style：preserve-3d：= 子元素开启立体空间
这个代码写给父级，但是影响的是子盒子；