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

Posted 2020-10-31 zss1

当用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;