スプライトアプリケーション-CSSチュートリアル-php.cn

スプライトアプリケーション

高洛峰

リリース： 2016-10-09 13:38:51

オリジナル

1281 人が閲覧しました

最近スプライト画像の使い方を学びました。スプライト画像の利点については詳しく説明しません。応用部分についてのみ説明します。

スプライト画像の使用はbackground-position属性に依存し、その属性値はそれぞれx軸とy軸の値になります。簡単に言うと、画像の表示サイズはコンテナによって決まります。表示間隔は画像のサイズと同じになります。開始点は、background-position 属性値の座標です。

素材は MOOC スプライトコース 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>

ログイン後にコピー

作成プロセス中に発生したいくつかの小さな問題:

a タグスタイルをクリアする

テキスト装飾を使用する：なし。その他の属性: オーバーライン - アンダーライン、アンダーライン - デフォルトのアンダーライン、ラインスルー - スルーライン

プレースホルダーのスタイルを変更します

ブラウザごとに互換性の問題があるため、ここでは主に Webkit カーネルブラウザと Firefox ブラウザを設定します。ブラウザ: ブラウザと IE 疑似クラスは次のように記述されます:

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

ログイン後にコピー

チェックボックスとテキストの位置がずれている場合の解決策:

この問題は、デフォルトのマージンとパディングを設定しても解決できません。コードに示すように、チェックボックスとテキストの両方にパディングを適用するには、vertical-align:middle 属性を使用します。