Conseils CSS

Nous devons encore nous souvenir de certaines techniques CSS classiques, qui peuvent nous faire gagner beaucoup de temps. Ci-dessous, Zero recommande quelques meilleures techniques CSS pour tout le monde :

1. Utilisez le même code de navigation sur différentes pages

De nombreuses pages Web ont des menus de navigation Lorsque vous entrez dans une certaine page, l'élément correspondant dans le menu doit devenir gris, tandis que les autres pages doivent s'allumer. Généralement, pour obtenir cet effet, vous devez écrire un programme ou un design spécifiquement pour chaque page. Vous pouvez désormais obtenir cet effet avec CSS.

Tout d'abord, utilisez la classe CSS dans le code de navigation :

<ul> 
<li><a href="#" class="home">首页</a></li> 
<li><a href="#" class="about">关于我们</a></li> 
<li><a href="#" class="contact">联系我们</a></li> 
</ul>

Puis pour chaque page séparément Corps spécifie un identifiant avec le même nom que la classe ci-dessus. Tel que 69aab999a64e75a9d5e7b7109fdc5db9.

Ensuite, concevez le CSS comme suit :

#home .home, #about .about, #contact .contact 
{ 
commands for highlighted navigation go here 
}

Ici, lorsque l'identifiant est défini sur home, .home fonctionnera, c'est-à-dire que la rangée de barres de navigation avec la classe définie sur home affichera des effets spéciaux. Il en va de même pour les autres pages.

Et si c'était pas très simple ?

2. Comparaison des éléments Block et inline

Tous les éléments HTML appartiennent à l'un des éléments block et inline. Les caractéristiques de l'élément block sont :

commence toujours sur une nouvelle ligne ;

la hauteur, la hauteur de la ligne et les marges supérieure et inférieure peuvent toutes être contrôlées

la largeur par défaut est ; 100 % de son conteneur, sauf si une largeur est définie

e388a4556c0f65e1904146cc1a846bee, e388a4556c0f65e1904146cc1a846bee, 4a249f0d628e2318394fd9b75b4636b1, ff9c23ada1bcecdd1a0fb5d5a0f18437, ff6d136ddc5fdfeffaf53ff6ee95f185 et 25edfb22a4f469ecb59f1190150159c6 Au contraire, les caractéristiques de l'élément en ligne sont :

et les autres éléments sont sur la même ligne ;

la hauteur, la hauteur de la ligne et les marges supérieure et inférieure ne peuvent pas être modifiées ; 🎜> width est La largeur de son texte ou de son image ne peut pas être modifiée.

45a2772a6b6107b401db3c9b82c049c2, 3499910bf9dac5ae3c52d5ede7383485, 2e1cf0710519d5598b1f0f14c36ba674, d5fd7aea971a85678ba271703566ebfd, a1f02c36ba31691bcfe87b2722de723b, 8e99a69fbe029cd4e2b854e244eab143 et 907fae80ddef53131f3292ee4f81644b

Utilisez la commande code class="inline">display: inline ou display: block pour modifier cette fonctionnalité d'un élément. Quand devez-vous modifier cet attribut ?

Laissez un élément en ligne commencer sur une nouvelle ligne ;

Gardez les éléments de bloc et les autres éléments sur une seule ligne

Contrôlez la largeur des éléments en ligne (particulièrement utile pour les barres de navigation ; );

Contrôlez la hauteur des éléments en ligne

Vous pouvez définir une couleur d'arrière-plan avec la même largeur que le texte pour un élément de bloc sans définir la largeur.

Pour plus d'articles liés aux techniques CSS, veuillez faire attention au site Web PHP chinois !