CSS : Introduction au contrôle des couleurs et de la taille avec le type de style de liste

La page que j'ai créée aujourd'hui a une petite icône qui ressemble beaucoup au symbole de la liste. Je voulais juste être paresseux et la remplacer par le propre style d'ul. J'ai vérifié en ligne et j'ai découvert qu'il existe une telle méthode, alors j'ai. l'a enregistré pour une utilisation future.

Sur la base de votre expérience personnelle, vous pouvez utiliser cette méthode si les couleurs sont les mêmes. Cependant, si la couleur de la police et la couleur de l'élément de liste sont différentes, vous devez utiliser un graphique pour l'implémenter et ajouter <.> au li. line-height:Npx; Seules les listes et les polices peuvent être affichées au centre dans IE

Citation :

L'année dernière, quand j'étais novice en CSS ; , j'ai demandé à un expert,

list Est-ce que -style-type peut changer de couleur ou de taille ? L'expert a dit : Non ! J'ai donc utilisé des photos pour le réaliser sous la direction de l'expert.

Parce que je suis autodidacte, l'écriture du CSS ne peut pas être aussi standardisée que les autres, j'ai donc la possibilité de faire des erreurs et de les découvrir. Aujourd'hui, je vais parler de la façon de changer la couleur et la taille du style devant list-style-type.

Jetons un coup d'oeil au code source

<ul class="artul">
    <li><a href="#">这里是SEO网站的文章列表标题目</a></li>
    <li><a href="#">这里是很长的SEO网站的文章列表标题目</a></li>
    <li><a href="#">这里是关于SEO网站的文章列表标题目</a></li>
    <li><a href="#">这里是一些最新的SEO网站的文章列表标题目</a></li>
    <li><a href="#">这里是近期SEO网站的文章列表标题目</a></li>
    <li><a href="#">这里是SEO常看的网站的文章列表标题目</a></li>
    <li><a href="#">这里是关于SEO网站的文章列表标题目</a></li>
    <li><a href="#">这里是一些最新的SEO网站的文章列表标题目</a></li>
    </ul>

et au CSS correspondant

Le CSS de la première image

.ul {margin:0;padding:0 0 0 15px;color:#ddd;font-size:12px;color:#FFFF00;list-style-type: square }
.ul li {border-bottom:1px dotted #999;}

Le CSS de la deuxième image

.ul {margin:0;padding:0 0 0 15px;color:#ddd;font-size:15px;color:#FF00FF;list-style-type: square }
.ul li {border-bottom:1px dotted #999;}

Je crois que tout le monde le sait. Changez simplement la couleur de ul pour changer la couleur, et la taille de la police pour changer la taille (la taille n'est pas prise en charge dans IE6, mais Firefox le peut)

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!