CSSスプライトの制作 image_html/css_WEB-ITnose-htmlチュートリアル-php.cn

ホームページ

ウェブフロントエンド

htmlチュートリアル

CSSスプライトの制作 image_html/css_WEB-ITnose

Jun 24, 2016 am 11:42 AM

実際に多くの Web サイトでスプライト画像が使用されていますが、これは制作に非常に便利です。私はこれらの小さなアイコンを 1 つずつ画像だと思っていました (笑)

レンダリングは次のとおりです。

コードは次のとおりです:

&lt;html&gt;&lt;head lang=&quot;en&quot;&gt;    &lt;meta charset=&quot;UTF-8&quot;&gt;    &lt;title&gt;&lt;/title&gt;    &lt;style&gt;        h3,ul {margin: 0;padding: 0;}        ul{list-style: none;}        li h3{font-size: 14px;font-weight:400;font-family:&quot;微软雅黑&quot; }        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;}    &lt;/style&gt;&lt;/head&gt;&lt;body&gt;&lt;div class=&quot;cat&quot;&gt;    &lt;ul&gt;        &lt;li class=&quot;cat-1&quot;&gt;            &lt;i&gt;&lt;/i&gt;            &lt;h3&gt;服装内衣&lt;/h3&gt;        &lt;/li&gt;    &lt;/ul&gt;    &lt;ul&gt;        &lt;li class=&quot;cat-2&quot;&gt;            &lt;i&gt;&lt;/i&gt;            &lt;h3&gt;鞋包配饰&lt;/h3&gt;        &lt;/li&gt;    &lt;/ul&gt;    &lt;ul&gt;        &lt;li class=&quot;cat-3&quot;&gt;            &lt;i&gt;&lt;/i&gt;            &lt;h3&gt;运动户外&lt;/h3&gt;        &lt;/li&gt;    &lt;/ul&gt;    &lt;ul&gt;        &lt;li class=&quot;cat-4&quot;&gt;            &lt;i&gt;&lt;/i&gt;            &lt;h3&gt;珠宝手表&lt;/h3&gt;        &lt;/li&gt;    &lt;/ul&gt;    &lt;ul&gt;        &lt;li class=&quot;cat-5&quot;&gt;            &lt;i&gt;&lt;/i&gt;            &lt;h3&gt;手机数码&lt;/h3&gt;        &lt;/li&gt;    &lt;/ul&gt;    &lt;ul&gt;        &lt;li class=&quot;cat-6&quot;&gt;            &lt;i&gt;&lt;/i&gt;            &lt;h3&gt;护肤彩妆&lt;/h3&gt;        &lt;/li&gt;    &lt;/ul&gt;    &lt;ul&gt;        &lt;li class=&quot;cat-7&quot;&gt;            &lt;i&gt;&lt;/i&gt;            &lt;h3&gt;办公电脑&lt;/h3&gt;        &lt;/li&gt;    &lt;/ul&gt;    &lt;ul&gt;        &lt;li class=&quot;cat-8&quot;&gt;            &lt;i&gt;&lt;/i&gt;            &lt;h3&gt;母婴用品&lt;/h3&gt;        &lt;/li&gt;    &lt;/ul&gt;&lt;/div&gt;&lt;/body&gt;

ログイン後にコピー

スプライト画像は自分でまとめたものです

コンピューター専攻ではない学生として、フロントエンドを 1 か月間学習していますが、それを継続できることを願っています

このウェブサイトの声明

この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。