-
- 慕粉1724599673 2021-01-22
- 利用图片的background-position 属性实现css雪碧图
-
截图0赞 · 0采集
-
- 优秀前端选手 2020-09-05
使用background-position来进行定位，还属性的值为所需图片的左上角的坐标
- 0赞 · 0采集
-
- 优秀前端选手 2020-09-05
雪碧图：减少HTTP的请求数，加速内容显示
使用条件：1.静态图片，不随用户信息变化而变化
2.小图片，图片容量比较小
3.加载量比较大
一些大图不建议拼成雪碧图
- 0赞 · 0采集
-
- Ocio 2020-07-31
雪碧图（加速网站）使用条件：1.静态图片，不随用户信息变化而变化
2.小图片，图片容量比较小
3.加载量比较大
一些大图不建议拼成雪碧图
- 0赞 · 0采集
-
- 梦娜丽莎 2020-07-09
- 测试
- 0赞 · 0采集
-
- qq_慕哥8242320 2020-05-29
雪碧图自动生成软件网址
-
截图0赞 · 0采集
-
- qq_慕哥8242320 2020-05-29
雪碧图自动生成软件
-
截图0赞 · 0采集
-
- qq_慕哥8242320 2020-05-29
雪碧图位置值
- 0赞 · 0采集
-
- qq_慕哥8242320 2020-05-29
雪碧图使用规则
-
截图0赞 · 0采集
-
- ArtoriasWong 2020-02-14
雪碧图的使用场景建议。
-
截图0赞 · 0采集
-
- 翻版郭富城 2019-11-02
<html>
<head>
<meta http-equiv="Content-Type"content="text/html; charset=utf-8"/>
<style>
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;
}
h3 {
display: block;
margin: 0;
padding: 0;
}
.cat {
position: relative;
width: 150px;
background: #f8f8f8;
border: 1px solid #bbb;
}
ol, ul {
list-style: none;
}
li {
z-index: 2;
position: relative;
display: block;
height: 31px;
line-height: 31px;
overflow: hidden;
margin: 1px 10px 0;
vertical-align: bottom;
border-bottom: 1px solid #dedede
}
li h3 {
font-size: 14px;
font-weight: 400;
}
ul i{
display: inline;
float: left;
height: 30px;
width: 24px;
margin: 5px 10px 0 0;
background-image: url("http://img.mukewang.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-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;}
</style>
</head>
<body>
<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-4">
<i></i>
<h3>珠宝手表</h3>
</li>
<li class="cat-5">
<i></i>
<h3>手机数码</h3>
</li>
<li class="cat-6">
<i></i>
<h3>家电办公</h3>
</li>
<li class="cat-7">
<i></i>
<h3>护肤彩妆</h3>
</li>
<li class="cat-8">
<i></i>
<h3>母婴用品</h3>
</li>
</ul>
</div>
</body>
</html>
- 0赞 · 0采集
-
- 翻版郭富城 2019-11-02
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>静态网页</title>
<style type="text/css">
*{margin: 0;padding: 0;}
h3{font-size: 16px;font-weight: normal;}
.cat{
width: 150px;
overflow: hidden;
border: 1px solid #444;
}
li{
list-style: none;
display: block;
height: 40px;
width: 130px;
border-bottom: 1px solid #444;
line-height: 40px;
margin: 0 auto;
text-align: center;
}
li:last-child{
border-bottom: none;
}
</style>
</head>
<body>
<div class="cat">
<ul>
<li>
<h3>服装内衣</h3>
</li>
<li>
<h3>鞋包配饰</h3>
</li>
<li>
<h3>运动户外</h3>
</li>
<li>
<h3>珠宝手表</h3>
</li>
<li>
<h3>手记数码</h3>
</li>
<li>
<h3>家电办公</h3>
</li>
<li>
<h3>护肤彩妆</h3>
</li>
<li>
<h3>母婴用品</h3>
</li>
</ul>
</div>
</body>
</html>
- 0赞 · 0采集
-
- qq_慕运维0176056 2019-08-15
cssGaga
-
截图0赞 · 1采集
-
- qq_慕运维0176056 2019-08-15
雪碧图实现原理
-
截图0赞 · 0采集
-
- qq_慕运维0176056 2019-08-15
雪碧图用途
-
截图0赞 · 0采集
-
- qq_慕运维0176056 2019-08-15
雪碧图使用场景
-
截图0赞 · 0采集
-
- qq_慕运维0176056 2019-08-15
雪碧图使用场景
- 0赞 · 0采集
-
- 慕沐0269658 2019-06-20
css sprite使用场景
-
截图0赞 · 0采集
-
- 慕容2010787 2019-05-15
- 生成雪碧图网站工具
-
截图0赞 · 1采集
-
- 慕容2010787 2019-05-15
- CSS工具
-
截图0赞 · 0采集
-
- 慕容2010787 2019-05-15
- 雪碧图实现方法
-
截图0赞 · 0采集
-
- 慕容2010787 2019-05-15
- 使用雪碧图的优点
-
截图0赞 · 0采集
-
- 慕容2010787 2019-05-15
- 雪碧图
-
截图0赞 · 0采集
-
- 你是漂亮的天蓝色 2019-04-25
雪碧图实现：
的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://img.mukewang.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;
}
- 0赞 · 0采集
-
- 你是漂亮的天蓝色 2019-04-25
利用雪碧图实现下图：
总体结构：有一个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>
- 0赞 · 0采集
-
- 你是漂亮的天蓝色 2019-04-25
将多张小图拼成一张大图：用CssGaga
（http://www.99css.com/archives/1524）
- 0赞 · 1采集
-
- 慕后端6437329 2019-03-28
<i>常用来放小图片; 2.无序列表去掉前面的小黑点，使用ul{list-style:none;} 3.图片设置background-position在css样式里设置； 4.不依赖于浏览器自身所设定的margin、padding，通过对<li>的行高已经margin、padding的设置来展示样式以便在各个浏览器下效果相同：先将display属性设置为block，否则设置行高什么的没用，overflow：hidden可防止元素溢出;
- 0赞 · 0采集
-
- 小丁同学ddd 2019-03-16
- 雪碧
- 0赞 · 0采集
-
- huen2013638874 2019-02-24
雪碧图创建方法：
【1】PS切图创建；
【2】CssGaga https://www.99css.com/1524/
- 1赞 · 1采集
-
- huen2013638874 2019-02-24
雪碧图原理：
【1】控制一个层，可显示的区域范围大小；
【2】通过一个窗口，进行背景图的滑动。
-
截图0赞 · 1采集
