一些浏览器的兼容和雪碧图的使用

当用li标签包裹住a标签，鼠标经过，让其它元素显示时。要写li:hover div{各种样式}而不能写ul li a:hover div{各种样式}

事件代理：为后来添加的元素添加上事件，优化引擎

— Gecko内核　　 css前缀为"-moz-"　　 火狐浏览器

— Presto内核 　　 css前缀为"-o-" Opera(欧朋)

— Trident内核　　css前缀为"-ms-" IE

— WebKit内核　　css前缀为“-webkit- safari chrome

用软件生成一张图片，会自动告诉你坐标，自己量的时候，是整张雪碧图的左上角是坐标00 到想用的图标的左上角 写XY 但是都是负值写到background：url(./img/icon.jpg) norepate -X px -Ypx; 然后让这个小图标在里面居中就是加上距离边的正值，比方说x是55 y是55 取到的图片是-55px -55px 然后居中比方说在想放的盒子里距离左边是8距离上面是10 才会居中，所以X轴坐标变为-55+8=-47px 而Y轴坐标变为-55+10=-45px；注意的一点就是在大图标定位到这个想要小图标时候都是负值，然后加上需要显示位置的正值得到最终位置坐标

PC端的布局形式：

固定宽度且居中

自适应宽度（浮动 、定位）

如果左中右三个浮动的div（也叫双飞翼布局） 然后把center写在div的最前面便于显示；

center：float:left , height:400px;width:100%; padding:0 200px; box-sizing:border-box;

left:float:left; width:200px; position:relative; margin-left:-100%;

right: left:float:left; width:200px; position:relative; margin-left:-200px;

欢迎大家一起交流 相互学习