Heim >Web-Frontend >CSS-Tutorial >Sprite-Anwendung
Sprite-Anwendung
- 高洛峰Original
- 2016-10-09 13:38:511305Durchsuche
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='text']{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;} //ie10Lö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