-
需要给每个i标签引入背景图片，然后进行图片定位查看全部
-
当元素（不论之前是什么类型元素，display:none 除外）设置以下 2 个句之一： 1.position : absolute 2.float : left 或 float:right 元素会自动变为以 display:inline-block 的方式显示，当然就可以设置元素的 width 和 height 了查看全部
-
sprite设计： 先对图标区域设置背景图 再将其相应区域撑开，即定义宽高 最后再逐个设置背景图的位置坐标，即：background-position属性 li i{ background:url();/*雪碧图片*/ display：inline;/*设置成行级元素*/ 因为与<h3>在一行 width:30px; height:24px;/*因为i标签本身没有内容，所以设置宽高作为显示区*/ float:left; /*浮动元素会生成一个块级框，从而可以设置宽高*/ 因为行级元素不能设置宽高，但是浮动之后，就可以了 margin:3px 10px 0 0;/*微调*/ } .cat-1 i{background-position:0 0;} .cat-2 i{background-position:0 -24px;} //设置偏移量，icon的高度 ，一定为负值！查看全部
-
li设置height和line-height时候必须将其display设置为block，否则设施的height和line-height是无效的。查看全部
-
常用<i></i>来放小图片icon 淘宝中， h2:菜单栏的标题 ， h3: icon的标题 去除li默认的黑点 ul{list-style:none} 设置h3样式 li h3{font-size:14px;font-weight:400}/*font-weight用来控制字体粗细的，也可以写文字bold，...，但是没有数字控制的精确*/ 细节：h3本身是有margin和padding的，不同浏览器中显示不一样。为了使在各个浏览器展示一致，所以需要reset初始设为0，然后自定义margin和padding值 h3{margin:0;padding:0;} 【一般来说，我们在开始写css代码的时候都会对CSS中做一个reset初始化默认值】 设置li的样式： li{ display:block; //成为块级元素,使得行高设置有效 height:31px; line-height:31px; //配合height,使得文字垂直居中 overflow:hidden; //防止里面的内容溢出 border-bottom:1px solid #dedede;/*设置一个浅灰色底边框当下划线*/ } height与line-height（行高）一致，是为了使文字水平居中 先将display属性设置为block，否则设置行高什么的没用，overflow：hidden可防止元素溢出查看全部
-
CSS Sprite雪碧图实现方式 1.PS手动拼图：制作多个小图片，拼成一个大图片，用鼠标挪动图片的位置（position）。适用自己的小网站 2.使用spite工具自动生成雪碧图 CSS Sprite自动生成工具-“cssGaga” 生成小图片的坐标，以及对应的css程序,提供background-position的值 下载地址：http://www.99css.com/archives/1524查看全部
-
1.通过CSS background-position来控制 2.坐标轴x,y为负值，雪碧图的左上角顶点作为0.0坐标； 当需要对坐标系中的某个小图标进行展示的时候，只需要取左上角的坐标进行偏移，例如(-100,0)，只需要将background-position:-100,0; 3.控制一个层，可显示的区域范围大小， 通过一个窗口，进行背景图的滑动查看全部
-
CSS雪碧的基本原理是把你的网站上用到的一些图片整合到一张单独的图片中，【将小图标和背景图像合并到一张图片上，然后利用css的背景定位来显示需要显示的图片部分。】从而减少你的网站的HTTP请求数量。查看全部
-
CSS Sprite :CSS雪碧图 通常一些网站，为了性能优化和减少请求数目，在导航图上的小图片，并没有使用img标签，使用的是CSS Sprite技术，加速网站显示。 建议修改为雪碧图的： 1.静态图片，不随用户信息的变化而变化 2.小图片，图片容量比较小 3.加载量比较大 一些大图不建议拼成雪碧图 作用：减少HTTP请求数量，加速内容显示。查看全部
-
过CSS background-position来控制 坐标轴,拼合背景图的小图(x,y)为负值 以雪碧图左上角的定点为(0,0)坐标 当需要对坐标系中的某个小图标进行展示的时候，只需要取左上角的坐标进行偏移，例如(-100,0)，只需要将background-position:-100,0; 实现原理：控制一个层，可显示的区域范围大小，通过一个窗口，进行背景图的滑动。查看全部
-
CSS Sprite雪碧图实现方式 1.PS手动拼图：制作多个小图片，拼成一个大图片，用鼠标挪动图片的位置（position）。适用自己的小网站 2.使用spite工具自动生成雪碧图 CSS Sprite自动生成工具-“cssGaga” 下载地址：http://www.99css.com/archives/1524查看全部
-
CSS Sprite雪碧图实现方式 1.PS手动拼图：制作多个小图片，拼成一个大图片，用鼠标挪动图片的位置（position）。适用自己的小网站 2.使用sprite工具自动生成雪碧图 CSS Sprite自动生成工具-“cssGaga” 可以生成小图片的坐标，以及对应的css程序。 下载地址：http://www.99css.com/archives/1524查看全部
-
CSS Sprite雪碧图实现方式 1.PS手动拼图：制作多个小图片，拼成一个大图片，用鼠标挪动图片的位置（position）。适用自己的小网站 2.使用sprite工具自动生成雪碧图 CSS Sprite自动生成工具-“cssGaga” 可以生成小图片的坐标，以及对应的css程序。 下载地址：http://www.99css.com/archives/1524查看全部
-
通过CSS background-position来控制 坐标轴,拼合背景图的小图(x,y)为负值 以雪碧图左上角的定点为(0,0)坐标 当需要对坐标系中的某个小图标进行展示的时候，只需要取左上角的坐标进行偏移，例如(-100,0)，只需要将background-position:-100,0; 实现原理：控制一个层，可显示的区域范围大小，通过一个窗口，进行背景图的滑动。查看全部
-
建议修改为雪碧图的： 1、静态图片，不随用户信息的变化而变化 2、小图片，图片容量比较小(3~5kb) 3、加载量比较大 4、一些大图不建议拼成雪碧图 做成雪碧图可以有效的减少http请求数量，加速内容显示查看全部
举报
0/150
提交
取消