CSSコントロールUL LIのスタイル解析について

この記事では主に CSS コントロール UL LI のスタイル分析を紹介します。これには特定の参考値がありますので、必要な方は参考にしてください。

p+CSS で最もよく使用されるのは ul li です。ニュースボタン等のデータを表示するため。これは学習用の CSS UL Li の例です

<p> 
</p>

 
• 首页
 
•  
• 博客
 
•  
• 设计
 
•  
• 相册
 
•  
• 论坛
 
•  
• 关于
 

 

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 属性（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;}

• 这里是列表内容
• 这里是列表内容
• 这里是列表内容

このスタイルをページに適用した場合の効果は下図のようになります。 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>

効果は次のとおりです。 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>

IV. List-style属性

list-style属性は、liスタイルを包括的に設定する属性であり、構文構造は次のとおりです。 :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>

これをページに適用した場合の効果を確認できます。

上記がこの記事の全内容です。その他の関連コンテンツについては、PHP 中国語 Web サイトをご覧ください。

関連する推奨事項:

CSS の強制改行におけるワードブレイク、ワードラップ、ホワイトスペースの違い

CSS を使用して緑色のチェックボックスボタンのスタイルをカスタマイズする

以上がCSSコントロールUL LIのスタイル解析についての詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。