Maison interface Web tutoriel CSS Concernant le problème de la modification du style de liste par l'attribut list en CSS pour contrôler le style de balise li

Concernant le problème de la modification du style de liste par l'attribut list en CSS pour contrôler le style de balise li

Jun 11, 2018 pm 02:50 PM
css li

Cet article présente principalement la question de la modification de l'attribut list pour contrôler le style de balise li en CSS avec le style liste. Il a une certaine valeur de référence. Maintenant, je le partage avec vous. Les amis dans le besoin peuvent s'y référer. >

Les attributs list_style sont utilisés pour modifier les attributs de la liste, list-style-type est utilisé pour définir le type d'élément de liste, list-style-position est utilisé pour définir la position de l'élément de liste et list-style -image est utilisé pour définir l'utilisation d'images pour remplacer la marque de l'élément de la liste

L'attribut list_style est utilisé pour modifier les attributs de la liste

Le format est le suivant : list_style : type de marque d'élément de liste position de la marque d'élément de liste
peut également être utilisé seul. Définissez la balise d'élément de liste :
list-style-type est utilisé pour définir le type d'élément de liste :
La valeur par défaut est un disque qui est un cercle plein,
Valeurs communes : aucune vide
cercle cercle creux
carré Carrés pleins
nombres décimaux
minuscules latins minuscules lettres latines a, b, c....
lettres majuscules latines A, B, C....
list-style-position Utilisé pour définir la position de cet élément de liste :
La valeur par défaut à l'extérieur signifie à l'extérieur de la balise li, il s'agit d'ajouter une bordure au li : 1px rouge uni, vous pouvez voir la position de la marque.
à l'intérieur signifie que la marque se trouve à l'intérieur de la balise li, ce qui est clairement visible lors de l'ajout d'une bordure.
list-style-image est utilisé pour définir l'utilisation d'images pour remplacer les balises d'éléments de liste :
Valeur par défaut : aucune
Valeur facultative : URL, le format est url ("adresse url" Exemple :


Spécifie un attribut "list-style-type" au cas où l'image ne serait pas disponible.
<!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>
Copier après la connexion

Ce qui précède représente l'intégralité du contenu de cet article. J'espère qu'il sera utile à l'étude de chacun. Pour plus de contenu connexe, veuillez faire attention au site Web PHP chinois !

Recommandations associées :

La différence et la priorité de l'utilisation de href et onclick dans la balise a de Html


Comment utiliser CSS3 Dégradé linéaire Le dégradé linéaire crée une bordure


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!

Déclaration de ce site Web
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn

Outils d'IA chauds

Undresser.AI Undress

Undresser.AI Undress

Application basée sur l'IA pour créer des photos de nu réalistes

AI Clothes Remover

AI Clothes Remover

Outil d'IA en ligne pour supprimer les vêtements des photos.

Undress AI Tool

Undress AI Tool

Images de déshabillage gratuites

Clothoff.io

Clothoff.io

Dissolvant de vêtements AI

AI Hentai Generator

AI Hentai Generator

Générez AI Hentai gratuitement.

Article chaud

R.E.P.O. Crystals d'énergie expliqués et ce qu'ils font (cristal jaune)
2 Il y a quelques semaines By 尊渡假赌尊渡假赌尊渡假赌
Repo: Comment relancer ses coéquipiers
4 Il y a quelques semaines By 尊渡假赌尊渡假赌尊渡假赌
Hello Kitty Island Adventure: Comment obtenir des graines géantes
3 Il y a quelques semaines By 尊渡假赌尊渡假赌尊渡假赌
Combien de temps faut-il pour battre Split Fiction?
3 Il y a quelques semaines By DDD

Outils chauds

Bloc-notes++7.3.1

Bloc-notes++7.3.1

Éditeur de code facile à utiliser et gratuit

SublimeText3 version chinoise

SublimeText3 version chinoise

Version chinoise, très simple à utiliser

Envoyer Studio 13.0.1

Envoyer Studio 13.0.1

Puissant environnement de développement intégré PHP

Dreamweaver CS6

Dreamweaver CS6

Outils de développement Web visuel

SublimeText3 version Mac

SublimeText3 version Mac

Logiciel d'édition de code au niveau de Dieu (SublimeText3)

Que signifie l'espace réservé en vue Que signifie l'espace réservé en vue May 07, 2024 am 09:57 AM

Que signifie l'espace réservé en vue

Comment écrire des espaces dans vue Comment écrire des espaces dans vue Apr 30, 2024 am 05:42 AM

Comment écrire des espaces dans vue

Comment avoir dom en vue Comment avoir dom en vue Apr 30, 2024 am 05:36 AM

Comment avoir dom en vue

Que signifie span en js Que signifie span en js May 06, 2024 am 11:42 AM

Que signifie span en js

Que signifie rem en js Que signifie rem en js May 06, 2024 am 11:30 AM

Que signifie rem en js

Comment introduire des images dans vue Comment introduire des images dans vue May 02, 2024 pm 10:48 PM

Comment introduire des images dans vue

Quelle est la fonction de la balise span Quelle est la fonction de la balise span Apr 30, 2024 pm 01:54 PM

Quelle est la fonction de la balise span

Comment envelopper l'invite dans js Comment envelopper l'invite dans js May 01, 2024 am 06:24 AM

Comment envelopper l'invite dans js

See all articles