検索

ホームページ >ウェブフロントエンド >CSSチュートリアル >CSSのリストスタイルとは何ですか

CSSのリストスタイルとは何ですか

coldplay.xixi
coldplay.xixiオリジナル
2021-03-21 17:56:253396ブラウズ

CSS のリスト スタイルは次のとおりです: 1. css 順序付きリスト [ol] および css 順序なしリスト [ul]; 2. css リスト ラベル スタイル [list-style-type]; 3. css ラベル スタイル 表示モード[リストスタイル位置]。

CSSのリストスタイルとは何ですか

このチュートリアルの動作環境: Windows7 システム、css3 バージョン、DELL G3 コンピューター。

CSS のリスト スタイルは次のとおりです:

1、CSS 順序付きリスト (ol) および CSS 順序なしリスト (UL) 

　　list.html
 
　　<!doctypehtml><html><head>
 
　　<metacharset="utf-8">
 
　　<title>列表样式</title>
 
　　<linkhref="box.css"type="text/css"rel="stylesheet"></head><body>
 
　　<p>
 
　　<ul>
 
　　<li>水果<ol>
 
　　<li>苹果</li>
 
　　<li>香蕉</li>
 
　　<li>梨子</li>
 
　　</ol>
 
　　</li>
 
　　</ul>
 
　　</p></body></html>

2. css リスト ラベル スタイル list-style-type

属性値:

  • # 丸;白丸

  • # ディスク;黒丸

  • # 10 進数;数値

    • ##
    　　list.css
 
　　ul>li{
 
　　list-style-type:circle;
 
　　}
 
　　ul>li>ol>li{
 
　　list-style-type:disc;
 
　　}

3. CSSラベルスタイルの表示方法 list-style-position

属性値: 外側 (テキストの外側、デフォルト)

内側 (テキストあり) 

　　list.css
 
　　ul{
 
　　text-align:center;
 
　　list-style-position:outside;
 
　　}
 
　　ul>li{
 
　　list-style-type:circle;
 
　　}
 
　　ul>li>ol>li{
 
　　list-style-type:disc;
 
　　}

関連チュートリアルの推奨事項:

CSS ビデオ チュートリアル

以上がCSSのリストスタイルとは何ですかの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

css css3 position ul
声明：
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
前の記事：CSSにはどのような種類のスタイルがありますか?次の記事：CSSにはどのような種類のスタイルがありますか?

関連記事

続きを見る