ulとliのスタイルを制御するCSSの解析（コード）

この記事の内容は、ul スタイルと li スタイルの CSS 制御の解析 (コード) に関するもので、一定の参考価値があります。必要な友人は参考にしていただければ幸いです。

コードは次のとおりです:

<div id="menu"> 
<ul> 
<li><a href="#">首页</a></li> 
<li class="menuDiv"></li> 
<li><a href="#">博客</a></li> 
<li class="menuDiv"></li> 
<li><a href="#">设计</a></li> 
<li class="menuDiv"></li> 
<li><a href="#">相册</a></li> 
<li class="menuDiv"></li> 
<li><a href="#">论坛</a></li> 
<li class="menuDiv"></li> 
<li><a href="#">关于</a></li> 
</ul> 
</div>

CSS:

コードは次のとおりです:

#menu ul {list-style:none;margin:0px;} 
#menu ul li {float:left;}

説明:

#menu ul {list-style:none;margin:0px;}

list-style:none、この文はリストの前のポイントが必要ないため、これらのポイントをキャンセルします。
margin:0px、この文は UL のインデントを削除するものです。これにより、リストのすべてのコンテンツがインデントされなくなります。

#menu ul li {float:left;}

ここでの float:left の左側と右側は同じ行に内容を表示するため、フローティング属性 (float) を使用します。

CSS の ul スタイルと li スタイルの詳細な説明

ul リストと li リストは、CSS を使用してページをレイアウトするときによく使用される要素です。 CSS には、リストのパフォーマンスを特に制御する属性があり、一般的に使用される属性には、list-style-type 属性、list-style-image 属性、list-style-position 属性、list-style 属性などがあります。

1. List-style-type 属性

list-style-type 属性は、li リストの箇条書き、つまり、次の変更を定義するために使用されます。リストの先頭にあります。 list-style-type 属性は継承可能な属性です。その文法構造は次のとおりです: (一般的に使用される属性値をいくつかリストします)

list-style-type:none/disc/circle/square/demical/lower-alpha/upper-alpha/lower-roman/upper-roman

list-style-type 属性には多くの属性値があります。ここでは、より一般的なもののいくつかのみをリストします。中古のもの。

none: 箇条書きは使用しません。ディスク：実線の円。円：中空の円。正方形: 実線の正方形。 demical: アラビア数字。 lower-alpha: 小文字の英字。 upper-alpha: 大文字の英字。 lower-roman: 小文字のローマ数字。 upper-roman: 大文字のローマ数字。

list-style-type 属性を使用するサンプル コードは次のとおりです:

li{list-style-type:square;}

<ul>
<li>这里是列表内容</li>
<li>这里是列表内容</li>
<li>这里是列表内容</li>
</ul>

2.List-style-image 属性

list -style-image 箇条書きの代わりに画像の使用を定義するために使用されるプロパティ。これは継承可能な属性でもあり、その構文構造は次のとおりです。

list-style-image:none/url

list-style-image 属性は 2 つの値を取ることができます。

none: 置換されるイメージはありません。 url: 置き換える画像のパス。

コードを見てみましょう:

li{list-style-image:url(images/bg03.gif);}

<ul>
<li>这里是列表内容</li>
<li>这里是列表内容</li>
<li>这里是列表内容</li>
</ul>

3. List-style-position 属性

list-style-position 属性リスト内で箇条書きが表示される場所を定義するプロパティが使用されます。これは継承可能な属性でもあり、構文構造は次のとおりです。

list-style-position:inside/outside

inside: 箇条書きはテキストの内側に配置されます。外側: 箇条書きはテキストの外側に配置されます。

list-style-position 属性の使用例は次のとおりです。

li{
list-style-type:square;
list-style-position:outside;}

<ul>
<li>这里是使用list-style-position属性值为outside的示例。请注意换行以后项目符号的位置。</li>
<li>这里是列表内容</li>
<li>这里是列表内容</li>
</ul>

属性値が内部に含まれるスタイルを見てみましょう。

li{
list-style-type:square;
list-style-position:inside;}

<ul>
<li>这里是使用list-style-position属性值为inside的示例。请注意换行以后项目符号的位置。</li>
<li>这里是列表内容</li>
<li>这里是列表内容</li>
</ul>

4. List-style 属性

list-style 属性は、li スタイルを包括的に設定する属性であり、継承可能な属性でもあります。

li-style:list-style-type/list-style-image/list-style-position

各値の位置は交換できます。例:

li{
list-style:url(images/bg03.gif) inside;}

<ul>
<li>这里是使用list-style属性的示例。请注意换行以后项目符号的位置。</li>
<li>这里是列表内容</li>
</ul>

[関連する推奨事項: CSS ビデオ チュートリアル ]

以上がulとliのスタイルを制御するCSSの解析（コード）の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。