CSS Sprite雪碧圖應用

時間 2020-02-10

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

原文原文鏈接

CSS Spritecss

CSS雪碧圖html

爲了減小http請求數量，加速網頁內容顯示，不少網站的導航欄圖標、登陸框圖片等，使用的並非<image>標籤，而是CSS Sprite雪碧圖。ide

雪碧圖使用場景：工具

一、靜態圖片，不隨用戶信息的變化而變化網站

二、小圖片，圖片容量比較小url

三、加載數量比較大spa

四、一些大圖不建議拼成雪碧圖code

（減小HTTP請求數，加速內容顯示）orm

雪碧圖實現原理：background-positionhtm

移動位置時，座標都須要設置成負值

雪碧圖生成方式

一、PS手動拼圖

二、大項目一般使用sprite工具自動生成

一款sprite工具：CssGaga （生成雪碧圖以及css代碼）

雪碧圖代碼實現

首先是sidebar.png

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        *{
            margin:0;
            padding:0;
        }

        .cat{
            width:130px;
            border:1px solid #bbb;
            background-color:#eee;
        }

        ul{
            list-style:none;
        }

        li{
            height:30px;
            line-height:30px;
            border-bottom:1px solid #ccc;
        }

        li h3{
            font-size:14px;
            color:#333;
        }

        li i{
            background:url(sidebar.png);
            display:inline;
            width:30px;
            height:24px;
            float:left;
            margin:3px 10px 0 0;
        }

        li.cat1 i{background-position:0 0;}
        li.cat2 i{background-position:0 -24px;}
        li.cat3 i{background-position:0 -48px;}
        li.cat4 i{background-position:0 -72px;}
        li.cat5 i{background-position:0 -96px;}
        li.cat6 i{background-position:0 -120px;}
        li.cat7 i{background-position:0 -144px;}
        li.cat8 i{background-position:0 -168px;}
        li.cat9 i{background-position:-40px 0;}
    </style>
</head>
<body>
    <div class="cat">
        <ul>
            <li class="cat1">
                <i></i>
                <h3>分類1</h3>
            </li>
            <li class="cat2">
                <i></i>
                <h3>分類2</h3>
            </li>
            <li class="cat3">
                <i></i>
                <h3>分類3</h3>
            </li>
            <li class="cat4">
                <i></i>
                <h3>分類4</h3>
            </li>
            <li class="cat5">
                <i></i>
                <h3>分類5</h3>
            </li>
            <li class="cat6">
                <i></i>
                <h3>分類6</h3>
            </li>
            <li class="cat7">
                <i></i>
                <h3>分類7</h3>
            </li>
            <li class="cat8">
                <i></i>
                <h3>分類8</h3>
            </li>
            <li class="cat9">
                <i></i>
                <h3>其餘分類</h3>
            </li>
        </ul>
    </div>
</body>
</html>

實現效果

用雪碧圖方式實現登陸框效果

btn.jpg

補充：如何修改hr的顏色

hr標籤是線條，其顏色要用background-color；
再給線條設置一個height，正常粗細就是1px，設置完後線條變粗；
那是由於hr有默認的border，須要將它的邊框去掉，設爲border:none
以上三點缺一不可

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        *{
            margin:0;
            padding:0;
        }

        .login{
            width:218px;
            background:rgb(235,243,250);
            margin:50px auto;
        }

        input{
            width:150px;
            height:28px;
            margin:14px 14px 0 14px;
            padding:5px 20px;
            border-radius:5px;
            border:1px solid #ccc;
        }

        input[type="checkbox"]{
            width:15px;
            height:15px;
        }

        .cbox{
            height:35px;
            line-height:35px;
            position: relative;
        }
        span{
            font-size:12px;
            vertical-align: 5px;
            position: absolute;
            top:5px;
            left:35px;
        }

        span.blue{
            color:rgb(70,121,172);
            top:5px;
            right:5px;
            left:auto;
        }

        input.btn{
            width:190px;
            height:38px;
            background:url(btn.png);
            margin-bottom:15px;
        }

        input.btn2{
            background-position:0 -39px;
        }

        hr{
            height:1px;
            border:none;
            background-color: #ccc;
            width: 188px;
            margin-left: 15px;
        }
    </style>
</head>
<body>
    <div class="login">
        <form>
            <input type="text" placeholder="郵箱/手機號/用戶名"><br>
            <input type="password" placeholder="請輸入密碼"><br>
            <div class="cbox">
                <input type="checkbox">
                <span>下次自動登陸</span>
                <span class="blue">忘記密碼？</span><br>
            </div>
            <input type="button" class="btn">
            <hr>
            <input type="button" class="btn btn2">
        </form>

    </div>
</body>
</html>

實現效果

相關標籤/搜索

每日一句

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