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 .

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

,

,

,

,

et
• 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.

  , , , , , et

  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 !