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

Posted zss1

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了一些浏览器的兼容和雪碧图的使用相关的知识,希望对你有一定的参考价值。

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

以上是关于一些浏览器的兼容和雪碧图的使用的主要内容,如果未能解决你的问题,请参考以下文章

Sprite(雪碧图)的应用

雪碧图的使用方法

CSS Sprite雪碧图的应用

特殊字体的兼容--图片代替

雪碧图制作使用的几种方式!

雪碧图制作使用的几种方式!