CSS Sprite——CSS雪碧圖

時間 2019-11-09

標籤 css sprite 雪碧欄目 CSS 简体版

原文原文鏈接

雪碧圖的使用原則

靜態圖片，不隨用戶信息變化而變化
javascript
小圖片，圖片容量較小css
加載量較大的狀況下使用html
大圖不建議使用雪碧圖java

做用

減小HTTP的請求數量：每請求一次，就會和服務器連接一次，創建鏈接須要額外的時間服務器
加速內容的顯示
工具

實現原理

經過CSS background-position實現
佈局

控制一個層可顯示區域範圍的大小，經過一個窗口，進行背景圖的滑動post

實現方式

PS手動拼圖，要記住每張圖的座標點
url
使用sprite自動生成工具（CssGaga：www.99css.com/archives/1524）
spa

實例

HTML代碼：

<html>
<head>
<!--準備一個空白的HTML頁面，同時完成css reset樣式 -->
<meta charset="utf-8">
<style>
    * {padding:0; margin:0;}
    ul{ list-style-type:none; border:1px solid #555;}
    li {  border-bottom:1px solid #eee;display:block; overflow:hidden; height:32px; line-height:32px;}
    li h3 {font-size:15px; font-weight:400; font-family:「微軟雅黑」;}
    .cat { width:150px; background:#f8f8f8;}
</style>
<!--補充完整的樣式-->
</head>
<body>
<div class="cat">
    <ul>
        <li>
            <i class="cat_1"></i>
            <h3>服裝內衣</h3>
        </li>
        <li>
            <i class="cat_2"></i>
            <h3>鞋包配飾</h3>
        </li>
        <li>
            <i class="cat_3"></i>
            <h3>運動戶外</h3>
        </li>
        <li>
            <i class="cat_4"></i>
            <h3>珠寶手錶</h3>
        </li>
        <li>
            <i class="cat_5"></i>
            <h3>手機數碼</h3>
        </li>
        <li>
            <i class="cat_6"></i>
            <h3>家電辦公</h3>
        </li>
        <li>
            <i class="cat_7"></i>
            <h3>護膚彩妝</h3>
        </li>
            <li>
            <i class="cat_8"></i>
            <h3>母嬰用品</h3>
        </li>
    </ul>
</div>
</body>
</html>

雪碧圖：

實現雪碧圖：

li i { 
        background:url(http://img.mukewang.com/539a950e00015ba500710200.jpg); 
        display:inline; 
        float:left; 
        width:30px; 
        height:24px;
        margin:3px 10px 0 0;
    }
    .cat_1 { background-position:0 0; }
    .cat_2 { background-position:0 -24px; }
    .cat_3 { background-position:0 -48px; }
    .cat_4 { background-position:0 -72px; }
    .cat_5 { background-position:0 -96px; }
    .cat_6 { background-position:0 -120px; }
    .cat_7 { background-position:0 -144px; }
    .cat_8 { background-position:-40px -168px; }

效果：

登錄的雪碧圖應用

雪碧圖：

HTML：

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>無標題文檔</title>

</head>

<body>
<div class="login">
    <form method="post" action="" name="loginForm">
        <input type="text" name="username" placeholder="郵箱/手機號/用戶名">
        <input type="password" name="password" placeholder="請輸入密碼">
        <input type="checkbox" name="auto_login" id="auto_login"><label for="auto_login">下次自動登錄</label>
        <a href="javascript:;">忘記密碼？</a>
        <input type="submit" name="login_submit" value="登陸">
        <input type="submit" name="register_submit" value="註冊">
    </form>
</div>
</body>
</html>

效果：

設置CSS樣式：

<style type="text/css">
	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;
    }
    .login {
        background-color:#ebf3fa;
        width:200px;
        overflow:hidden;
        padding:25px;
    }
    .login * {
        border-radius:3px;
        margin:5px 0;
    }
    .login input[type="text"],
    .login input[type="password"] {
        width:190px;
        height:35px;
        text-indent:20px;
        clear:both;
    }
    .login label[for="auto_login"] {
        font-size:10px;
    }
    .login a {
        text-decoration:none;
        font-size:10px;
    }
    .login input[type="submit"],
    .login input[type="login"] {
        width:190px;
        height:35px;
        color:#fff;
        word-spacing:5px;
        text-align:center;
        line-height:35px;
    }
    .login input[name*="submit"] {
        background:url(login.png) 0 0;
    }
    .login input[name*="register"] {
		background:url(login.png) 0 -38px;    
    }
    
</style>

效果：

CSS display:inline和float:left二者區別

①display:inline:任何不是塊級元素的可見元素都是內聯元素。其表現的特性是“行佈局”形式!(行佈局:其表現形式始終以行進行顯示) ②float:left:指定元素脫離普通的文檔流而產生的特別的佈局特性。而且float必需應用在塊級元素之上，也就是說浮動並不該用於內聯標籤。或者能夠說若是應用了float這個元素將被指定爲塊級元素。那麼二者的區別顯而易見:display:inline元素不能設置寬高，由於它屬於行佈局，其特性是在一行裏進行佈局，因此不能被設定寬高

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。