ホームページ > 記事 > ウェブフロントエンド > list-style とはどういう意味ですか? list-style スタイル属性の詳細な説明
list-style とはどういう意味ですか? list-style スタイル属性の詳細な説明
- 云罗郡主転載
- 2018-11-22 14:58:4043069ブラウズ
この記事の内容は、リスト スタイルの意味について詳しく説明したもので、参考になれば幸いです。
1. list-style
list-style の機能と使用法は、リスト li のスタイルを設定することです。たとえば、li の前にはアラビア数字、ドット、黒丸、絵、中空丸、英小文字、英大文字、伝統的なアルメニア数字などが続きます。
2. 文法:
リスト スタイル : リスト スタイル リスト || -style-typeHTML 構文では、li は ul または ol 内で使用する必要があると規定されているため、ul または ol に対して list-style-image を設定して、li のフロント レイアウト素材として画像を導入できます。 。ただし、通常、このメソッドは div css レイアウト中に li の前面画像マテリアルを設定するために使用されません。通常、背景画像は li に直接設定されるため、互換性が高く、制御が容易です。 li のデフォルトのフロント スタイルを設定するために、list-style-type 属性 (ほとんどが list-style) を使用します。 2. list-style-type の値と説明自分でテストして、さまざまな値の効果を確認できます。 パラメータ:
3. 一般的なレイアウトの実践
通常、Web ページをレイアウトするときは、次のことが必要です。 CSS を開始するには、主要なブラウザとの互換性を保つために、3 つのリスト ul ol li のリスト スタイル スタイルを削除し、リスト タグのデフォルトのリスト スタイルをキャンセルします。
ul li ol のリスト スタイル スタイル コードをキャンセルします:ul,ol,li{list-style:none}Web ページでは、リストの前にドットを設定し、次に背景の背景画像を設定する必要があります。リー。 1. コードは次のとおりです: <!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>ul li布局实例</title>
<style>
ul, ol, li {list-style: none;margin:0; padding:0;normal;font:14px/24px Arial}
</style>
</head>
<body>
<ul class="ab">
<li>php.cn-1</li>
<li>php.cn-2</li>
<li>php.cn-3</li>
</ul>
</body>
</html>効果は次のとおりです:
##2.上記の li ul ol を削除します。 3 つのデフォルトのリスト スタイル スタイルでは、mragin とパディングが 0、フォント サイズが 14 ピクセル、行の高さが 24 ピクセルに設定されます。 li 独自の list-style-type を使用してドット効果を設定してみてはいかがでしょうか? 
これは、異なるドット効果や左からの距離の違いを避けるためにブラウザごとに一定の違いがあるため、リスト スタイルのスタイルは一律にキャンセルされ、背景スタイルがレイアウトの実装に再利用されます。
上記はリスト スタイルの意味についての完全な紹介です。リスト スタイルのスタイル属性の詳細な説明は、
CSS3 チュートリアルに注目してください。 PHP中国語ウェブサイト。
以上がlist-style とはどういう意味ですか? list-style スタイル属性の詳細な説明の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。
声明：
この記事はthinkcss.comで複製されています。侵害がある場合は、admin@php.cn までご連絡ください。