CSS Sprite雪碧图应用_技术笔记

慕九州908278 2019-01-13

先设置li i 的background-image。
然后设置具体i的background-position。

0赞 · 0采集
迂鱼雨玉 2017-04-10

一旦一个元素设置了 float, 那么这个元素的 display 就会被指定为 block，即使你手动再去改变 display 的值，它仍然会保持为 block！

0赞 · 0采集
慕粉3845395 2016-11-08

图片的偏移量根据图片的宽高设置

0赞 · 0采集
慕移动9130976 2016-08-09

display:inline属性是在默认情况下，宽度和高度设置无效，就像a标签如果不是默认情况，就算设置了display:inline,他们的宽高依然可以设置而且有效，只是变成同行显示 div的默认display属性是block 而input的display属性是inline-block 所以他们的宽高是可以设置的

0赞 · 1采集
霜花似雪 2016-07-09

根据坐标位置给每一个i标签设置一个background-position 例如： .cat-1{background-position:0 -24px;}

截图
0赞 · 0采集
霜花似雪 2016-07-09

CSS display:inline和float:left两者区别 ①display:inline:任何不是块级元素的可见元素都是内联元素。其表现的特性是“行布局”形式!(行布局:其表现形式始终以行进行显示) ②float:left:指定元素脱离普通的文档流而产生的特别的布局特性。并且float必需应用在块级元素之上，也就是说浮动并不应用于内联标签。或者可以说如果应用了float这个元素将被指定为块级元素。那么两者的区别显而易见:display:inline元素不能设置宽高，因为它属于行布局，其特性是在一行里进行布局，所以不能被设定宽高给i标签设置雪碧图背景图片 li i{ background:url();/*雪碧图片*/ display：inline;/*设置成行级元素*/（不同浏览器默认值有些不一样，所以网页设计时，最好都明确定义） width:30px; height:24px;/*因为i标签本身没有内容，所以设置宽高作为显示区*/ float:left; /*浮动元素会生成一个块级框，从而可以设置宽高*/ margin:3px 10px 0 0;/*微调*/ }

截图
0赞 · 0采集
P妞酱酱 2016-06-23

dssssssssssssssssssss

截图
0赞 · 0采集
P妞酱酱 2016-06-23

xxxxxxxxxxxxxxxxxxxxxssssssssssssssssssssssss

截图
0赞 · 0采集
P妞酱酱 2016-06-23

xxxxxxxxxxxxxxxxxxxxx

截图
0赞 · 0采集
P妞酱酱 2016-06-23

sfffffffdddddddddddddddddd

截图
0赞 · 0采集
P妞酱酱 2016-06-23

sdfsddddddddddddddddddd

截图
0赞 · 0采集
P妞酱酱 2016-06-23

dfaaaaaaaaaaaaaaaaaa

截图
0赞 · 0采集
DC_ALemonsen 2016-06-01

ul li ｛｝选择器是给ul下的li 都设置样式。

0赞 · 0采集
wbp3164295 2016-05-02

<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标签所拥有的自己属性。

0赞 · 0采集
wbp3164295 2016-05-02

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>标签

截图
0赞 · 0采集
tuuu 2016-04-08

<html> <head>   <style> ul{ list-style:none; } h3{ margin:0; padding:0; } li h3{ font-size:14px; font-weight:400; } li{ display=block; Height:31px; Line-height:31px; Overflow:hidden; Border-bottom:1px solid #dedede } .cat{ width:150px; background:#f8f8f8; border:1px solid #bbb; } </style> </head> <body>  <div class="cat"> <ul class> <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采集
暴走大熊 2015-12-19

先给小图标<i>一个样式{background:ur(sp.png)}; 接下来给li 的分类cat-1或cat-2等一个定位的样式.cat-1{background-position:0 0;}

0赞 · 0采集
慕瓜4458176 2015-12-11

①display:inline:任何不是块级元素的可见元素都是内联元素。其表现的特性是“行布局”形式!(行布局:其表现形式始终以行进行显示) ②float:left:指定元素脱离普通的文档流而产生的特别的布局特性。并且float必需应用在块级元素之上，也就是说浮动并不应用于内联标签。或者可以说如果应用了float这个元素将被指定为块级元素。那么两者的区别显而易见:display:inline元素不能设置宽高，因为它属于行布局，其特性是在一行里进行布局，所以不能被设定宽高。简单的说就是float可以设置宽高，然而display:inline;虽然也会浮动，但是他不能设置宽高。

0赞 · 0采集
IsYang 2015-12-04

雪碧图的应用

截图
0赞 · 0采集
喵喵喵妹爱吃草莓派 2015-11-28

雪碧图最重要的部分 background-position:x轴 y轴，要使用定义i标签，并在之前引用雪碧图

0赞 · 0采集
missxu 2015-11-23

http://www.99css.com/cssgaga/

0赞 · 0采集
记得喝水 2015-11-23

li i的设置。

截图
0赞 · 0采集
AryaLiv 2015-11-19

url

截图
0赞 · 0采集
QDanielle 2015-11-18

CSS display:inline和float:left两者区别 ①display:inline:任何不是块级元素的可见元素都是内联元素。其表现的特性是“行布局”形式!(行布局:其表现形式始终以行进行显示) ②float:left:指定元素脱离普通的文档流而产生的特别的布局特性。并且float必需应用在块级元素之上，也就是说浮动并不应用于内联标签。或者可以说如果应用了float这个元素将被指定为块级元素。那么两者的区别显而易见:display:inline元素不能设置宽高，因为它属于行布局，其特性是在一行里进行布局，所以不能被设定宽高

0赞 · 0采集
aqkfps 2015-11-09

雪碧图格式

截图
0赞 · 0采集
感激我遇见 2015-10-30

CSS display:inline和float:left两者区别 ①display:inline:任何不是块级元素的可见元素都是内联元素。其表现的特性是“行布局”形式!(行布局:其表现形式始终以行进行显示) ②float:left:指定元素脱离普通的文档流而产生的特别的布局特性。并且float必需应用在块级元素之上，也就是说浮动并不应用于内联标签。或者可以说如果应用了float这个元素将被指定为块级元素。那么两者的区别显而易见:display:inline元素不能设置宽高，因为它属于行布局，其特性是在一行里进行布局，所以不能被设定宽高。 ... background-position:x轴 y轴，要使用定义i标签 background:url(雪碧图片);

0赞 · 0采集
戬亭麟 2015-10-28

雪碧图要按一定顺序排列，x和y轴的排列方向和距离

0赞 · 0采集
戬亭麟 2015-10-28

雪碧图最重要的部分 background-position:x轴 y轴，要使用定义i标签，并在之前引用雪碧图

0赞 · 1采集
sunshineboy00 2015-10-25

雪碧图使用i标签标识icon

0赞 · 0采集
Amy1234567 2015-10-24

鼠标划过变手指curse:pointer; 元素垂直排列:vertical-align:top;

0赞 · 0采集

数据加载中...