CSSスプライトの制作 image_html/css_WEB-ITnose
Jun 24, 2016 am 11:42 AM
実際に多くの Web サイトでスプライト画像が使用されていますが、これは制作に非常に便利です。私はこれらの小さなアイコンを 1 つずつ画像だと思っていました (笑)
レンダリングは次のとおりです。
コードは次のとおりです:
<html><head lang="en"> <meta charset="UTF-8"> <title></title> <style> h3,ul {margin: 0;padding: 0;} ul{list-style: none;} li h3{font-size: 14px;font-weight:400;font-family:"微软雅黑" } li{ display: block; height: 31px; line-height: 31px; overflow: hidden; border-bottom: 1px solid #dedede; margin: 1px 10px 0 } li i{ display:inline; background: url(sidebar.png); width:30px; height: 24px; float: left; margin:3px 10px 0 0 ; } .cat{ width: 150px; background:#f8f8f8 ; border: 1px solid #bbb; } .cat-1 i {background-position: 0 0:} .cat-2 i{background-position: 0 -24px;} .cat-3 i{background-position: 0 -48px;} .cat-4 i{background-position: 0 -72px;} .cat-5 i{background-position: 0 -96px;} .cat-6 i{background-position: 0 -120px;} .cat-7 i{background-position: 0 -144px;} .cat-8 i{background-position: 0 -168px;} </style></head><body><div class="cat"> <ul> <li class="cat-1"> <i></i> <h3>服装内衣</h3> </li> </ul> <ul> <li class="cat-2"> <i></i> <h3>鞋包配饰</h3> </li> </ul> <ul> <li class="cat-3"> <i></i> <h3>运动户外</h3> </li> </ul> <ul> <li class="cat-4"> <i></i> <h3>珠宝手表</h3> </li> </ul> <ul> <li class="cat-5"> <i></i> <h3>手机数码</h3> </li> </ul> <ul> <li class="cat-6"> <i></i> <h3>护肤彩妆</h3> </li> </ul> <ul> <li class="cat-7"> <i></i> <h3>办公电脑</h3> </li> </ul> <ul> <li class="cat-8"> <i></i> <h3>母婴用品</h3> </li> </ul></div></body>
ログイン後にコピー
スプライト画像は自分でまとめたものです
コンピューター専攻ではない学生として、フロントエンドを 1 か月間学習していますが、それを継続できることを願っています
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。

人気の記事
R.E.P.O.説明されたエネルギー結晶と彼らが何をするか(黄色のクリスタル)
1週間前
By 尊渡假赌尊渡假赌尊渡假赌
レポ:チームメイトを復活させる方法
3週間前
By 尊渡假赌尊渡假赌尊渡假赌
ハローキティアイランドアドベンチャー:巨大な種を手に入れる方法
3週間前
By 尊渡假赌尊渡假赌尊渡假赌
スプリットフィクションを打ち負かすのにどれくらい時間がかかりますか?
3週間前
By DDD

人気の記事
R.E.P.O.説明されたエネルギー結晶と彼らが何をするか(黄色のクリスタル)
1週間前
By 尊渡假赌尊渡假赌尊渡假赌
レポ:チームメイトを復活させる方法
3週間前
By 尊渡假赌尊渡假赌尊渡假赌
ハローキティアイランドアドベンチャー:巨大な種を手に入れる方法
3週間前
By 尊渡假赌尊渡假赌尊渡假赌
スプリットフィクションを打ち負かすのにどれくらい時間がかかりますか?
3週間前
By DDD

ホットな記事タグ

メモ帳++7.3.1
使いやすく無料のコードエディター

SublimeText3 中国語版
中国語版、とても使いやすい

ゼンドスタジオ 13.0.1
強力な PHP 統合開発環境

ドリームウィーバー CS6
ビジュアル Web 開発ツール

SublimeText3 Mac版
神レベルのコード編集ソフト(SublimeText3)

ホットトピック
Gmailメールのログイン入り口はどこですか?
7304
9


Java チュートリアル
1623
14


CakePHP チュートリアル
1344
46


Laravel チュートリアル
1259
25


PHP チュートリアル
1207
29



公式アカウントのキャッシュの更新の難しさ:バージョンの更新後のユーザーエクスペリエンスに影響を与える古いキャッシュを回避する方法は?

HTML5フォーム検証属性を使用してユーザー入力を検証するにはどうすればよいですか?

&lt; iframe&gt;の目的は何ですか タグ?使用する際のセキュリティ上の考慮事項は何ですか?

IFramesを使用することのセキュリティへの影響は何ですか?また、どのようにそれらを軽減できますか?
