-
CSS雪碧即CSS Sprite，也叫CSS精靈，是一種CSS圖像合并技術(shù)，該方法是將小圖標和背景圖像合并到一張圖片上，然后利用css的背景定位來顯示需要顯示的圖片部分。 適用場景： 1.靜態(tài)圖片，不隨用戶信息的變化而變化 2.小圖片，圖片容量比較小 3.加載量比較大 大圖不建議拼成雪碧圖查看全部
-
雪碧圖的使用情況查看全部
-
雪碧圖查看全部
-
雪碧圖編程挑戰(zhàn)查看全部
-
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.添加對應(yīng)圖標： <style> .cat-1 i{background-position:0 0;} .cat-2 i{background-position:0 -24px;} ... .cat-8 i{background-position:0 -168px;} </style> 注意：position的值為負數(shù)，因為雪碧圖使用的坐標系是第四象限。查看全部
-
一、準備一個空白的HTML頁面，同時完成css reset樣式： 1.reset樣式可以參考別的大型網(wǎng)站的reset規(guī)則。 2.要添加utf-8的meta標簽。 3.注意要reset H3的默認樣式。 4.li和ul要去掉默認的樣式。 5.為ul的容器div增加class，并設(shè)置樣式。 <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的結(jié)構(gòu)代碼： 1.注意標簽的語義化，無序列表需使用ul和li。 2.標題部分要使用h3標簽。 3.每個li結(jié)構(gòu)當中會有一個i標簽用來展示icon。 <body> <div class="box"> <ul> <li><i></i><h3>服裝內(nèi)衣</h3></li> <li><i></i><h3>鞋包服飾</h3></li> <li><i></i><h3>運動戶外</h3></li> <li><i></i><h3>珠寶手表</h3></li> <li><i></i><h3>手機數(shù)碼</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實現(xiàn)方式： 1.PS手動拼圖 2.使用sprite工具cssGaga自動生成 下載地址：http://www.99css.com/1524/查看全部
-
控制一個層，可顯示的區(qū)域范圍太小，通過一個窗口，進行背景圖的滑動查看全部
-
小圖以左上角定點為（0,0）坐標開始查看全部
-
拼合背景圖的小圖（X,Y）為負值查看全部
-
使用雪碧圖有效減少http請求數(shù)量，加速內(nèi)容顯示 每請求一次，就會和服務(wù)器鏈接一次，建立鏈接是需要額外時間的查看全部
-
CSS雪碧即CSS Sprite，也叫CSS精靈，是一種CSS圖像合并技術(shù)，該方法是將小圖標和背景圖像合并到一張圖片上，然后利用css的背景定位來顯示需要顯示的圖片部分。 適用場景： 1.靜態(tài)圖片，不隨用戶信息的變化而變化 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> <!--添加列表的結(jié)構(gòu)--> <div class="cat"> <ul> <li class="cat-1"><h3>服裝內(nèi)衣<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>手機數(shù)碼<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進行設(shè)置查看全部
-
應(yīng)用場景查看全部
舉報
0/150
提交
取消