-
使用雪碧图可以大大较少HTTP请求次数。一次下载完毕就可以了。性能上非常好！ 1.静态图片，不随用户信息的变化而变化 2.小图片，图片容量比较小(3~5k) 3.加载量比较大，会把它拼成雪碧图 一些大图不建拼成雪碧图 作用：减少HTTP请求数量，加速内容显示。 原因：每请求一次，就会和服务器链接一次，建立连接是需要额外的时间的。查看全部
-
雪碧图原理：css:backgroud-position; 通过控制一个层，可显示的区域范围大小，通过一个窗口，进行背景图的滑动查看全部
-
为什么用雪碧图 有效的减少htttp的请求数目 加速内容显示 没请求一次就会和服务器连接一次 建立连接是需要额外时间的查看全部
-
雪碧图应用条件查看全部
-
给i标签设置雪碧图背景图片 li i{ background:url();/*雪碧图片*/ display：inline;/*设置成行级元素*/（不同浏览器默认值有些不一样，所以网页设计时，最好都明确定义） width:30px; height:24px;/*因为i标签本身没有内容，所以设置宽高作为显示区*/ float:left; /*浮动元素会生成一个块级框，从而可以设置宽高*/ margin:3px 10px 0 0;/*微调*/ } 然后再，根据坐标位置给每一个i标签设置一个background-position 例如： .cat-1{background-position:0 -24px;}查看全部
-
完成页面当中的展示列表HTML的结构代码 1.注意标签的语义化，无序列表需使用ul和li。 2.标题部分要使用h3标签。 3.每个li结构当中会有一个i标签用来展示icon。 为列表的容器添加class和样式，同时reset列表本身的容器 1.注意要reset H3的默认样式。 2.li和ul要去掉默认的样式。 3.为ul的容器div增加class，并设置样式。查看全部
-
通过CSS background-position来控制 坐标轴,拼合背景图的小图(x,y)为负值 以雪碧图左上角的定点为(0,0)坐标 当需要对坐标系中的某个小图标进行展示的时候，只需要取左上角的坐标进行偏移，例如(-100,0)，只需要将background-position:-100,0; 控制一个层，可显示的区域范围大小， 通过一个窗口，进行背景图的滑动查看全部
-
给i标签设置雪碧图背景图片 li i{ background:url();/*雪碧图片*/ display：inline;/*设置成行级元素*/（不同浏览器默认值有些不一样，所以网页设计时，最好都明确定义） width:30px; height:24px;/*因为i标签本身没有内容，所以设置宽高作为显示区*/ float:left; /*浮动元素会生成一个块级框，从而可以设置宽高*/ margin:3px 10px 0 0;/*微调*/ } 然后再，根据坐标位置给每一个i标签设置一个background-position 例如： .cat-1{background-position:0 -24px;}查看全部
-
完成页面当中的展示列表HTML的结构代码 1.注意标签的语义化，无序列表需使用ul和li。 2.标题部分要使用h3标签。 3.每个li结构当中会有一个i标签用来展示icon。 为列表的容器添加class和样式，同时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可防止元素溢出 （决定浏览器如何处理溢出的步骤： (1) 输入 overflow: 。 (2) 输入 visible ，让元素盒子中的所有内容可见，这是默认项； 或者输入 hidden ，隐藏元素盒子容纳不了的内容； 或者输入 scroll ，无论元素是否需要，都在元素上添加滚动条； 或者输入 auto ，让滚动条仅在访问者访问溢出内容时出现。）查看全部
-
<style> ul{list-style:none}//去掉前面的装饰 li {display:block;//使得行高设置有效 height:31px;//高度 line-height:31px;//配合height,使得文字垂直居中 overflow:hidden;//防止内容溢出 border-bottom:1px solid//分割线为1px的实心线查看全部
-
坐标系，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 background-position来控制 坐标轴,拼合背景图的小图(x,y)为负值 以雪碧图左上角的定点为(0,0)坐标 当需要对坐标系中的某个小图标进行展示的时候，只需要取左上角的坐标进行偏移，例如(-100,0)，只需要将background-position:-100,0; 控制一个层，可显示的区域范围大小， 通过一个窗口，进行背景图的滑动查看全部
-
CSS Sprite :CSS雪碧图 通常一些网站，为了性能优化和减少请求数目，在导航图上的小图片，并没有使用img标签，使用的是CSS Sprite技术，加速网站显示。 1.静态图片，不随用户信息的变化而变化 2.小图片，图片容量比较小(3~5k) 3.加载量比较大，会把它拼成雪碧图 一些大图不建拼成雪碧图 作用：减少HTTP请求数量，加速内容显示。 原因：每请求一次，就会和服务器链接一次，建立连接是需要额外的时间的。查看全部
举报
0/150
提交
取消