-
雪碧图静态页面制作查看全部
-
【雪碧图的实现方式】 1、PS手动拼图，缺点就是必须得自己再计算各个小图的坐标 2、使用sprite工具自动生成，快速的建立雪碧图的效果，优化设计 CSS sprite自动生成工具——CssGaga，windows环境下快速生成雪碧图的工具 下载网址：http://www.99css.com/archives/1524查看全部
-
1.添加雪碧图： <style> li i {background:url(http://img1.sycdn.imooc.com//539a950e00015ba500710200.jpg);} </style> 2.为li添加不同的class，因为他们的background position值是不同的： <html><body><div><ul> <li class="cat-1"></li> <li class="cat-3"></li> ... <li class="cat-8"></li> </ul></div></body></html> 3.添加对应图标： <style> .cat-1 i{background-position:0 0;} .cat-2 i{background-position:0 -24px;} ... .cat-8 i{background-position:0 -168px;} </style> 注意：position的值为负数，因为雪碧图使用的坐标系是第四象限。查看全部
-
ul>li.cat-$*8>i+h3{服装内衣} 按ctrl+e查看全部
-
li{…overflow:hidden…} 相当于变成行内块： li i{display:inline;width:30px;height:24px;float:left;}查看全部
-
.........查看全部
-
记得分号查看全部
-
不用把li设置为块元素，使字体上下左右居中可以用text-align:再加上li的内填充。 font-weight：400 加上px和不加的区别。 div的padding可以使li的下边界线变短查看全部
-
<ul> <li class="cat-1"> <i></i> <h3>服装内衣</h3> </li> </ul> li i{ background:url(sp.png); display:inline; width:30px; height:24px; float:left; margin:3px 10px 0 0; } .cat-1 i{ background-position:0 0; } 所有li标签下的i标签都有那一大堆属性，每个li标签下的i标签又都有自己的属性。就是把li标签下的i标签的共同属性抽出来，然后呢又通过类名来指定特定的li标签下的i标签所拥有的自己属性。查看全部
-
li i {background:url(sp.png);display:inline;width:30px;height:24px;float:left;margin:3px 10px 0 0;}<br> <br> <br> .cat-1 i{background-position:0 0;}注：.cat-1是指那个类为cat-1的<li>标签查看全部
-
控制一个层，可显示的区域范围大小。 通过一个窗口进行背景图的滑动查看全部
-
拼合背景图的小图（x,y)为负值查看全部
-
<div class="container"> <li class="cat-1"> <i></i> <h3></h3> </li> <li class="cat-2"> <i></i> <h3></h3> </li> <li class="cat-3"> <i></i> <h3></h3> </li> </div>查看全部
-
background:url(); background-position: x?px y?px;查看全部
-
Sprite雪碧图的适用场景:查看全部
举报
0/150
提交
取消