Heim > Artikel > Web-Frontend > Sprite-Anwendung

Sprite-Anwendung

高洛峰Original: 2016-10-09 13:38:511268Durchsuche

Ich habe kürzlich gelernt, wie man Sprite-Bilder verwendet. Ich werde nicht näher auf die Vorteile von Sprite-Bildern eingehen, sondern nur auf den Anwendungsteil.

Die Verwendung von Sprite-Bildern hängt vom Attribut „Hintergrundposition“ ab. Die Attributwerte sind die Werte der x- bzw. y-Achse. Die Anzeigegröße des Bildes wird durch den Container bestimmt Einfach ausgedrückt ist es die Größe der Anzeige, die das Bild enthält. Das Intervall gibt an, wie groß es ist, und der Ausgangspunkt ist die Koordinate des Attributwerts für die Hintergrundposition.

Das Material stammt aus dem MOOC-Sprite-Kurs http://www.imooc.com/code/1992

<!DOCTYPE html">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
<title>无标题文档</title>
</head>
<style>
    /*清除默认样式*/
   html,body,ul,li,button,div,input,a{ padding:0; margin:0; }
   a{text-decoration:none}
   body{ font-size:10px;}
   .content input::-webkit-input-placeholder {color:#ccc;padding-left:30px;}
</style>
<style>
    /*书写样式*/
    .content{margin-top:15px;padding:10px; width:190px;height:240px;background-color:#deeaf6;}
    .content .text input,.content .text label,.content .text a{ vertical-align:middle;height:20px;line-height:20px;}
    .content .text a{float:right; color:#696BF6;}
    .content input[type=&#39;text&#39;]{margin-bottom:15px;border:1px solid #CDCACA;width:100%; height:30px;border-radius:5px;background-color:#fff;}
    .button button{background:url("http://img.mukewang.com/539a972b00013e9102280177.jpg") no-repeat;width:100%;height:38px; margin-top:15px;border:none;
    }
    .button .btn1{background-position:0 0; }
    .button .btn2{background-position:0 -38px;  }
    .button span{display:inline-block; width:100%;height:15px;border-bottom:1px solid #ccc; }
</style>
<body>
<div class="content">
    <input type="text" placeholder="邮箱/手机号/用户名"/>
    <input type="text" placeholder="请输入密码"/>
    <div class="text">
        <input type="checkbox" id="box"/>
        <label for="box">下次自动登录</label>
         <a href="#">忘记密码？</a>
    </div>
   
    <div class="button">
        <button class="btn1"></button>
        <span></span>
        <button class="btn2"></button>
    </div>
</div>
</body>
</html>

Ein paar kleinere Probleme, die während des Schreibprozesses aufgetreten sind:

Löschen Sie einen Tag-Stil

Verwenden Sie text-decoration:none. Andere Attribute Überstreichen – Unterstreichen, Unterstreichen – Standard-Unterstreichen, Durchgestrichen – Durchgestrichen

Ändern Sie den Stil des Platzhalters

Da verschiedene Browser Kompatibilitätsprobleme haben, finden Sie hier die wichtigsten Webkit-Kernel-Browser einrichten , Firefox-Browser und IE-Browser. Die Pseudoklasse ist wie folgt geschrieben:

::-moz-placeholder{color:red;}              //ff19+
:-moz-placeholder{color:red}　　　　　　 //ff18-
::-webkit-input-placeholder{color:red;}     //chrome,safari
:-ms-input-placeholder{color:red;}          //ie10

Lösung für die Fehlausrichtung von Kontrollkästchen und Text:

Diese Problemeinstellung Der Standardrand und -abstand kann nicht entfernt werden. Sie können das Attribut „vertikal-align:middle“ sowohl für Kontrollkästchen als auch für Text verwenden:

.content .text input,.content .text label,.content .text a{ vertical-align:middle;height:20px;line-height:20px;}

entfernt die hellblaue Farbe, wenn das Eingabefeld den Fokus erhält . Farbrand

Eingabeattributumriss festlegen:keine

Stellungnahme：

Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn

Vorheriger Artikel：Detaillierte Erläuterung des CSS-Cursor-URL-VerwendungsformatsNächster Artikel：Detaillierte Erläuterung des CSS-Cursor-URL-Verwendungsformats

In Verbindung stehende Artikel

Mehr sehen