Explication détaillée des attributs de type liste de Ul et Li en CSS

Référence :

list-style-typeUtilisation

Syntaxe :
list-style-type : disque cercle carré | | inférieur-roman | alpha-inférieur | alpha-supérieur aucun | cjk-idéographique | hébreu inférieur | -latin

valeur :
disque : valeur CSS1 par défaut. Cercle plein
cercle : CSS1 Cercle creux
carré : CSS1 Carré plein
décimal : CSS1 Chiffres arabes
minuscule romain : CSS1 Chiffres romains minuscules
majuscule romain : CSS1 Chiffres romains majuscules
alpha inférieur : lettres anglaises minuscules CSS1
alpha supérieur : lettres anglaises majuscules CSS1
aucun : CSS1 n'utilise pas de puces
armenianl : CSS2 n'est pas pris en charge. Chiffres arméniens traditionnels
cjk-ideographic : Non pris en charge par CSS2. Chiffres idéographiques blanc clair
géorgien : non pris en charge par CSS2. Numéros de George traditionnels
inférieur-grec : Non pris en charge par CSS2. Lettres minuscules grecques de base
hébreu : Non pris en charge par CSS2. Chiffres hébreux traditionnels
hiragana : Non pris en charge par CSS2. Caractère hiragana japonais
hiragana-iroha : Non supporté par CSS2. Numéro de série Hiragana japonais
katakana : Non pris en charge par CSS2. Caractère katakana japonais
katakana-iroha : Non supporté par CSS2. Numéro de série japonais Katakana
inférieur-latin : non pris en charge par CSS2. Lettres latines minuscules
majuscule-latin : Non supporté par CSS2. Lettres latines majuscules

－－－－－－－－－－－－－－－－－－

Formatage du code LI :

A). symbole de liste :

ul li{ 
list-style-type:none; 
}

B). Si vous souhaitez changer le symbole de liste en image, alors :

ul li{ 
list-style-type:none; 
list-style-image
: url(images/icon.gif); 
}

C). code :

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

D). Si vous souhaitez ajouter une couleur de fond à la liste, vous pouvez utiliser le code suivant :

ul{ 
list-style-type: none; 
margin:0px; 
} 
ul li{ 
background
:#CCC; 
}

Si vous souhaitez ajouter. un effet de couleur de fond MOUSEOVER à la liste, vous pouvez utiliser Le code suivant :

ul{ list-style-type: none; margin:0px; } 
ul li a{ 
display
:block; width: 100%; background:#ccc; } 
ul li a:hover{ background:#999; }

Explication : display:block; Cette ligne doit être ajoutée pour qu'elle puisse être affichée sous forme de bloc !

F).Les éléments en LI sont disposés horizontalement, touche FLOAT:LEFT:

ul{ 
list-style-type:none; 
width:100%; 
} 
ul li{ 
width:80px; 
float:left; 
}

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!