ホームページ >ウェブフロントエンド >CSSチュートリアル >CSSで順序なしリストを設定するにはどうすればよいですか? CSS リスト スタイルの概要
CSSで順序なしリストを設定するにはどうすればよいですか? CSS リスト スタイルの概要
- 寻∝梦オリジナル
- 2018-09-06 13:41:0610816ブラウズ
CSSで順序なしリストのスタイルを設定する方法ご存知ですか？ここでは、順序なしリストの詳細なアプリケーション、これらのアイコンなどの削除、および画像を追加するための小さなドットの削除についても紹介します。今すぐこの記事を見てみましょう
まず、順序なしリストを見てみましょう:
順序なしリストは通常、小さなドットに置き換えられることは誰もが知っていますが、小さなドットは見栄えが悪い場合もあります。見た目の美しさを高めるために、CSS スタイルにはいくつかのスタイル方法があります。 1 つ目: もちろん、順序なしリストのデフォルトの小さなドットです
2 つ目: 小さなドットを使用して、表示を小さな正方形に変更します。
- 3番目の方法: 小さなドットを中空の円に変更します
- 4番目の方法: 小さなドットを削除します。これはより一般的に使用されるはずです。
- 5番目の方法: これもあまり一般的ではありませんが、番号を先頭に付けて、順序なしリストを順序付きリストにプログラムする方法です
それでは、これら 5 つの CSS の完全なコードを見てみましょうスタイル:
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>PHP中文网</title>
<style type="text/css">
.zhe1{list-style-type:disc;}
.zhe2{list-style-type:square;}
.zhe3{list-style-type:circle;}
.zhe4{list-style-type:none;}
.zhe5{list-style-type:decimal;}
</style>
</head>
<body>
<ul>
<li class="zhe1">我是默认小圆点</li>
<li class="zhe2">我是小方块</li>
<li class="zhe3">我是空心圆</li>
<li class="zhe4">我是没有标记的</li>
<li class="zhe5">我是要有序列表</li>
</ul>
</body>
</html> これは比較的単純なコードです。まずブラウザでの表示効果を見てみましょう: 
CSS リファレンス マニュアル 列にアクセスして学習してください)
それでは、CSS リスト スタイルの概要について話しましょう:
- list-style-image : url image address 属性は、リスト項目のマークを置き換えるために画像を使用します。
- list-style-position 属性は、テキスト内に配置される inside 値もあります。
- リスト形式の複合記述方法
<style type="text/css">
.zhe1,.zhe2,.zhe3,.zhe4,.zhe5{list-style:none;}
</style> この CSS スタイルを使用すると、不要なものを削除して、他の属性を記述することができます: 
CSSでフォントをカスタマイズするには？ HTMLのテキストフォントスタイルの紹介
HTMLで文字間隔を設定するにはどうすればよいですか？ CSSスタイル設定の文字配置まとめ
以上がCSSで順序なしリストを設定するにはどうすればよいですか? CSS リスト スタイルの概要の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。
声明：
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。