list-style の問題について CSS の list 属性を変更して li タグのスタイルを制御する-CSSチュートリアル-php.cn

list-style の問題について CSS の list 属性を変更して li タグのスタイルを制御する

不言

リリース： 2018-06-11 14:50:19

オリジナル

2387 人が閲覧しました

この記事では、li タグのスタイルを制御するために CSS の list 属性を変更する問題を主に紹介します。これには、必要な友達が参照できるように共有します。

list_style 属性は、次の目的で使用されます。リスト属性を変更します。list-style-type はリスト項目タイプの設定に使用され、list-style-position はリスト項目の位置の設定に使用され、list-style-image は置換する画像の使用の設定に使用されます。リスト項目マーク

list_style 属性はリストを変更するために使用されます。属性

の形式は次のとおりです:
list_style: リスト項目マークのタイプリスト項目マークの位置リスト項目マーク
リスト項目を設定することもできます。個別にマークします:
list-style-type は、リスト項目のタイプを設定するために使用されます:
デフォルト値は、円盤です。
一般的な値: 空なし
円中空の円
正方形実線の正方形
10 進数
小ラテン語ラテン文字の小文字 a、b、c....
ラテン文字の大文字 A、B、C ....
list-style-position は、このリスト項目の位置を設定するために使用されます:
デフォルト値は外側ですli タグの外側を意味します。これは、li に境界線を追加することを意味します。1 ピクセルの赤で、マークの位置がわかります。
inside は、マークが li タグの内側にあることを意味し、境界線を追加するときにはっきりと確認できます。
list-style-image は、リスト項目タグを置き換える画像の使用を設定するために使用されます。
デフォルト値: なし
オプションの値: URL、形式は url ("url address") です
例:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
<title>无标题文档</title> 
<style type="text/css"> 
ul { 
border:1px solid red; 
} 
li{ 
border:1px solid red; 
list-style:disc outside url(news_list.gif); 
list-style-position:5px; 
} 
</style> 
</head> 
<ul> 
<li>你好</li> 
<li>我好</li> 
</ul> 
<body> 
</body> 
</html>

ログイン後にコピー

を指定します。画像が利用できない場合の「list-style-type」属性。

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