li タグにアイコンを追加する 3 つの方法を共有する

ページをレイアウトするときに li タグを使用することがよくあります。li タグだけを使用するのは比較的単調です。ページの効果を高めるために、画像を追加する必要がある場合があります。では、li タグに画像を追加するにはどうすればよいでしょうか。この記事では、li タグにアイコンを追加する 3 つの方法を紹介します。お役に立てば幸いです。

1. CSS

ul{list-style-type:disc;} // ロールの特別な属性を使用します。ディスクの各 li の前に黒い点を追加することです。その他によく使用されるのは、四角形: 黒の四角形、なし: リスト形式なし、

アイコンが外側にあるか内側にあるかを制御することです。 li タグ (

ul{list-style-position:inside;} またはOutside)

独自のカスタム パターンを追加したい場合は、

を使用できます。 ul{list-style-image:url (画像アドレス);}

もちろん、これは位置とともに使用することもできます。

しかし、私は上記の属性を適用したことがありませんし、誰にもお勧めしません。なぜですか?

まず第一に、ul のリスト形式タイプでは、ブラウザごとに異なるサイズのドットや四角形が表示され、非常に見苦しいです。

さらに、position属性は使いにくいので、この属性を使ってみた結果、IE6以降とFirefoxで表示される向きを統一するのが困難でした。

2。background

ul{….;list-style-type:none;….}

li{… を使用することをお勧めします。 ;background:url (背景アイコン) no-repeat 0px 0px;….}

ここでの no-repeat の機能は、画像がタイル効果を生成しないようにすることであり、0px、0px は位置決めのための座標です。画像表示。

ここでもう 1 つ注意点を述べておきます。li に背景画像を追加するには、padding-left: 任意の数値 px も追加する必要があります。そうしないと、テキストが背景アイコンをブロックしますが、同時に、 li に width を追加しないでください。そうしないと、ブラウザでの互換性に問題が生じます。詳細については、CSS の位​​置を参照して、padding 属性を注意して使用してください。背景を使用してランキング リストを実装します。

実際、これは非常に簡単で、クリックするだけです。

ul{….;background:url (パス) no-repeat 1px 2px;….}

ご存知のとおり、写真を li ではなく ul に追加するだけですが、違いは、写真が 1、2、3... の写真であることです。列順に並べたり、その他の効果を希望したりすることができます。各行の高さは画像に厳密に対応していることに注意してください。

以上がli タグにアイコンを追加する 3 つの方法を共有するの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。