-
CSS Sprite雪碧图实现方式 1.PS手动拼图：制作多个小图片，拼成一个大图片，用鼠标挪动图片的位置（position）。适用自己的小网站 2.使用spite工具自动生成雪碧图 CSS Sprite自动生成工具-“cssGaga” 生成小图片的坐标，以及对应的css程序,提供background-position的值 下载地址：http://www.99css.com/archives/1524查看全部
-
原理：通过css background-position 来控制 坐标轴，拼合背景图的小图（x,y）为负值 以雪碧图的左上角为坐标原点（0,0） 当需要对坐标系中的某个小图标进行展示的时候，只需要取左上角的坐标进行偏移，例如（-100,0），只需 要设置 background-position:-100,0;查看全部
-
使用雪碧图可以大大减少HTTP请求次数。一次下载完就好了，性能非常好！ 1，静态图片，不随用户信息的变化而变化 2，小图片，图片容量比较小（3-5K） 3，加载量比较大，会把它拼装成雪碧图 4，一些大图不建议拼成雪碧图查看全部
-
123查看全部
-
CSS Spirie 完成的代码 总结： 1，li i{display:inline;float;left;} 2, li h3{display:block} 3,CSS reset 4,background:url(); 5,.cat-1 i{background-posotion: -xx -xx;}查看全部
-
background-podition 坐标的写法，空格。 .cat-1 i{ background-position: 0 0; } .cat-2 i{ background-position: 0 -24px; }查看全部
-
原理：通过css的背景定位属性：background-position 坐标轴,拼合背景图的小图(x,y)为负值 以雪碧图左上角的定点为(0,0)坐标查看全部
-
css sprite：css雪碧图 1、静态图片，不随用户用户信息的变化而变化 2、小图片 3、加载量比较大 有效的减少http请求数量，加上内容的显示。查看全部
-
CSS reset： blockquote, body, button, dd, dl, dt, fieldset, form, h1, h2, h3, h4, h5, h6, hr, input, legend, li, ol, p, pre, td, textarea, th, ul{ margin: 0; padding: 0; }查看全部
-
对页面进行reset 1常用<i></i>来放小图片 2为给小图片设置background-position属性，需要给<li>定义一个类名<li class="cat-数字"> 3去掉<ul>标签下<li>标签的小黑点，在<style>标签下ul{list-style:none} 4不依赖于浏览器自身所设定的margin、padding，通过对<li>的行高已经margin、padding的设置来展示样式以便在各个浏览器下效果相同：先将display属性设置为block，否则设置行高什么的没用，overflow：hidden可防止元素溢出查看全部
-
CSS Sprite雪碧图实现方式 1.PS手动拼图：制作多个小图片，拼成一个大图片，用鼠标挪动图片的位置（position）。适用自己的小网站 2.使用spite工具自动生成雪碧图 CSS Sprite自动生成工具-“cssGaga” 生成小图片的坐标，以及对应的css程序,提供background-position的值 下载地址：http://www.99css.com/archives/1524查看全部
-
CSS Sprite实现原理：控制一个层，可显示的区域范围大小，通过一个窗口，进行背景图的滑动。 通过CSS background-position来控制 坐标轴,拼合背景图的小图(x,y)为负值 以雪碧图左上角的定点为(0,0)坐标 当需要对坐标系中的某个小图标进行展示的时候，只需要取左上角的坐标进行偏移，例如(-100,0)，只需要将background-position:-100,0;查看全部
-
使用雪碧图可以大大较少HTTP请求次数。一次下载完毕就可以了。性能上非常好！ 1.静态图片，不随用户信息的变化而变化 2.小图片，图片容量比较小(3~5k) 3.加载量比较大，会把它拼成雪碧图 一些大图不建拼成雪碧图查看全部
-
。。。。。。。。。查看全部
-
.cat-1 i{background-position:0 0;} .cat-2 i{background-position:0 -24px;} .cat-3 i{background-position: 0 -48px;} .cat-4 i{background-position: 0 -72px;} .cat-5 i{background-position: 0 -96px;} .cat-6 i{background-position:0 -120px;} .cat-7 i{background-position:0 -144px;} .cat-8 i{background-position:0 -168px;} li i{ background:url(http://img1.sycdn.imooc.com//539a950e00015ba500710200.jpg); display:inline; width:30px; height:24px; float:left; }查看全部
举报
0/150
提交
取消