ホームページ >ウェブフロントエンド >htmlチュートリアル >カスタムリスト項目シンボル list-style-image の詳細説明
カスタムリスト項目シンボル list-style-image の詳細説明
- 云罗郡主転載
- 2018-11-12 16:19:444960ブラウズ
この記事では、カスタム リスト アイテム シンボル list-style-image について詳しく説明します。必要な方は参考にしていただければ幸いです。
1. List-style-image 属性
順序付きリストであっても順序なしリストであっても、独自のリスト項目シンボルがあります。しかし、デフォルトのリスト項目シンボルは比較的見にくいので、リスト項目シンボルをカスタマイズしたい場合はどうすればよいでしょうか。
CSS では、list-style-image 属性を使用してリスト項目のシンボルをカスタマイズできます。
構文:
list-style-image:url(图像地址);
説明:
画像アドレスには、相対アドレスまたは絶対アドレスを指定できます。 [推奨読書: html の相対位置と絶対位置]
例:
次の小さなアイコンをリスト項目シンボルとしてカスタマイズします。
例:
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>list-style-image属性</title>
<style type="text/css">
ul{list-style-image:url("https://img.php.cn/upload/9-3-1.png");}
</style>
</head>
<body>
<ul>
<li>HTML</li>
<li>CSS</li>
<li>JavaScript</li>
</ul>
</body>
</html>効果は次のとおりです:
上記はカスタム リスト項目 シンボル list-style-image の詳細な説明の完全な紹介 Html5 チュートリアル について詳しく知りたい場合は、PHP 中国語 Web サイトに注目してください。
以上がカスタムリスト項目シンボル list-style-image の詳細説明の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。
声明：
この記事はlvyestudy.comで複製されています。侵害がある場合は、admin@php.cn までご連絡ください。