-
利用圖片的background-position 屬性實現(xiàn)css雪碧圖查看全部
-
使用background-position來進行定位，還屬性的值為所需圖片的左上角的坐標
查看全部 -
雪碧圖：減少HTTP的請求數(shù)，加速內(nèi)容顯示
使用條件：1.靜態(tài)圖片，不隨用戶信息變化而變化
2.小圖片，圖片容量比較小
3.加載量比較大
一些大圖不建議拼成雪碧圖
查看全部 -
雪碧圖（加速網(wǎng)站）使用條件：1.靜態(tài)圖片，不隨用戶信息變化而變化
2.小圖片，圖片容量比較小
3.加載量比較大
一些大圖不建議拼成雪碧圖
查看全部 -
測試查看全部
-
雪碧圖自動生成軟件網(wǎng)址
查看全部 -
雪碧圖自動生成軟件
查看全部 -
雪碧圖位置值
查看全部 -
雪碧圖使用規(guī)則
查看全部 -
雪碧圖的使用場景建議。
查看全部 -
<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://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-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>服裝內(nèi)衣</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>手機數(shù)碼</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>
查看全部 -
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>靜態(tài)網(wǎng)頁</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>服裝內(nèi)衣</h3>
</li>
<li>
<h3>鞋包配飾</h3>
</li>
<li>
<h3>運動戶外</h3>
</li>
<li>
<h3>珠寶手表</h3>
</li>
<li>
<h3>手記數(shù)碼</h3>
</li>
<li>
<h3>家電辦公</h3>
</li>
<li>
<h3>護膚彩妝</h3>
</li>
<li>
<h3>母嬰用品</h3>
</li>
</ul>
</div>
</body>
</html>
查看全部
舉報