-
CSS雪碧即CSS Sprite，也叫CSS精灵，是一种CSS图像合并技术，该方法是将小图标和背景图像合并到一张图片上，然后利用css的背景定位来显示需要显示的图片部分。 适用场景： 1.静态图片，不随用户信息的变化而变化 2.小图片，图片容量比较小 3.加载量比较大 大图不建议拼成雪碧图查看全部
-
雪碧图的使用情况查看全部
-
雪碧图查看全部
-
雪碧图编程挑战查看全部
-
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的值为负数，因为雪碧图使用的坐标系是第四象限。查看全部
-
一、准备一个空白的HTML页面，同时完成css reset样式： 1.reset样式可以参考别的大型网站的reset规则。 2.要添加utf-8的meta标签。 3.注意要reset H3的默认样式。 4.li和ul要去掉默认的样式。 5.为ul的容器div增加class，并设置样式。 <head> <meta charset="utf-8"> <title>index.html</title> <style type="text/css"> h3{margin:0; padding:0; font-size:14px; font-weight:400;} li{list-style:none; display:block; height:31px; line-height:31px; overflow:hidden; border-bottom:1px solid #dedede;} .box{width:150px; background:#f8f8f8; border:1px solid #bbb;} </style> </head> 二、完成页面当中的展示列表HTML的结构代码： 1.注意标签的语义化，无序列表需使用ul和li。 2.标题部分要使用h3标签。 3.每个li结构当中会有一个i标签用来展示icon。 <body> <div class="box"> <ul> <li><i></i><h3>服装内衣</h3></li> <li><i></i><h3>鞋包服饰</h3></li> <li><i></i><h3>运动户外</h3></li> <li><i></i><h3>珠宝手表</h3></li> <li><i></i><h3>手机数码</h3></li> <li><i></i><h3>家电办公</h3></li> <li><i></i><h3>护肤彩妆</h3></li> <li><i></i><h3>母婴用品</h3></li> </ul> </div> </body>查看全部
-
CSS sprite实现方式： 1.PS手动拼图 2.使用sprite工具cssGaga自动生成 下载地址：http://www.99css.com/1524/查看全部
-
控制一个层，可显示的区域范围太小，通过一个窗口，进行背景图的滑动查看全部
-
小图以左上角定点为（0,0）坐标开始查看全部
-
拼合背景图的小图（X,Y）为负值查看全部
-
使用雪碧图有效减少http请求数量，加速内容显示 每请求一次，就会和服务器链接一次，建立链接是需要额外时间的查看全部
-
CSS雪碧即CSS Sprite，也叫CSS精灵，是一种CSS图像合并技术，该方法是将小图标和背景图像合并到一张图片上，然后利用css的背景定位来显示需要显示的图片部分。 适用场景： 1.静态图片，不随用户信息的变化而变化 2.小图片，图片容量比较小 3.加载量比较大 大图不建议拼成雪碧图查看全部
-
<html> <head> <style> *{margin:0;padding:0;} li{display:block;list-style:none;height:30px;line-height:30px;border:1px solid #f7f7f7; border:1px solid #dedede; overflow:hidden;} h3{font-size:14px;font-weight:400;text-indent:20px;} .cat{ background:#f8f8f8;width:150px; border:1px solid #bbb;} </style> </head> <body> <!--添加列表的结构--> <div class="cat"> <ul> <li class="cat-1"><h3>服装内衣<h3></li> <li class="cat-2"><h3>鞋包配饰<h3></li> <li class="cat-3"><h3>运动户外<h3></li> <li class="cat-4"><h3>珠宝手表<h3></li> <li class="cat-5"><h3>手机数码<h3></li> <li class="cat-6"><h3>家电办公<h3></li> <li class="cat-7"><h3>护肤彩妆<h3></li> <li class="cat-8"><h3>母婴用品<h3></li> </ul> </div> </body> </html>查看全部
-
li h3{} li下面的H3进行设置查看全部
-
应用场景查看全部
举报
0/150
提交
取消