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

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

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

素材はMOOCスプライトコースhttp://www.imooc.com/code/1992から引用しています

リーリー

執筆プロセス中にいくつかの小さな問題が発生しました:

タグスタイルをクリア

text-decoration:noneを使用します。その他の属性: overline - 下線、underline - デフォルトの下線、line-through - スルーライン

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

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

リーリー

チェックボックスとテキストの位置が揃っていません解決策:

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

リーリー

入力ボックスにフォーカスが当たったら、水色の境界線を削除します

入力属性をアウトライン:なしに設定します