-
cssGaga
查看全部 -
雪碧图实现原理
查看全部 -
雪碧图用途
查看全部 -
雪碧图使用场景
查看全部 -
雪碧图使用场景
查看全部 -
css sprite使用场景
查看全部 -
生成雪碧图网站工具查看全部
-
CSS工具查看全部
-
雪碧图实现方法查看全部
-
使用雪碧图的优点查看全部
-
雪碧图查看全部
-
雪碧图实现：
的css样式：
首先将所有元素的margin、padding设为0，清除浏览器默认的样式
li{
display:block;
height:31px;
line-height:31px;
overflow:hidden;
margin:1px 10px 0 0;
border-bottom:1px solid #dedede;
}
li i{
dispaly:inline;
float:left;
margin:3px 10px 0 0;
height:30px;
width:30px;
background-image:url("http://img1.sycdn.imooc.com//539a950e00015ba500710200.jpg");
}
根据背景图进行定位：
.cat-1 i{
background-position:0 0;
}
.cat-2 i{
background-position:0 -24px;
}
.cat-3 i{
background-position:0 -48px;
}
……
.cat-8 i{
background-position:0 -168px;
}
查看全部 -
利用雪碧图实现下图：
总体结构：有一个div容器，利用<ul>标签，<ul>标签里有8个<li>标签，<li>标签里有一个<i>标签用于放图标，还有一个<h3>标签用于放说明性文字
<div class="cat">
<ul>
<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>
……
<li class="cat-8"><i></i><h3>母婴用品</h3></li>
</ul>
</div>
查看全部
举报