Tutoriel d'introduction à la mise en page Web CSS 9 : Utiliser CSS pour concevoir un site Web de navigation horizontale navigation_Tutoriel de base

La navigation sur un site Web est l'élément le plus important d'un site Web. C'est l'outil le plus direct et le plus pratique que le site Web fournit aux utilisateurs pour accéder au contenu du site Web. La navigation sur le site Web comprend principalement la troisième forme de navigation horizontale, de navigation verticale, de navigation par menu déroulant et à plusieurs niveaux.
Navigation horizontale En tant que conception de site Web portail, la navigation principale utilise généralement la navigation horizontale. Étant donné qu'il y a beaucoup de texte en bas du site Web du portail et que chaque canal a une distinction de style unique, le choix le plus idéal est de fixer une zone en haut pour concevoir une navigation avec un style unifié qui n'encombre pas trop d'espace. La plupart des portails domestiques adoptent cette méthode.
La navigation verticale n'est plus populaire dans la conception des sites Web portails. La navigation verticale est plus encline à exprimer des catégories de produits.
La navigation déroulante est principalement utilisée pour les sites Web dotés de fonctions complexes. C’est également courant sur certains sites Web.

D'une manière générale, l'objectif principal de la navigation est de concevoir une entrée d'opération simple et rapide pour aider les utilisateurs à accéder rapidement au contenu correspondant sur le site Web. La conception doit concevoir un formulaire de navigation raisonnable en fonction des besoins du site Web. type et contenu. Ici, nous utiliserons CSS pour concevoir trois formulaires de navigation couramment utilisés afin de voir comment CSS implémente ces styles.

Navigation horizontale

L'utilisation de la mise en page CSS pour créer la navigation est très différente de la mise en page des tableaux. En plus de la mise en page, la chose la plus importante du site Web est la partie navigation. vous devez d'abord créer un système de navigation simple et clair, puis compléter la navigation finale avec effet de conception étape par étape. Ici, nous avons d'abord conçu le style de conception principal en haut, et la navigation est une forme de navigation horizontale. Avant de commencer la production de navigation CSS, rappelons d'abord la production de navigation traditionnelle au format tableau. Si le format de tableau a implémenté le formulaire de navigation comme indiqué dans la figure, vous devez concevoir un tableau. La navigation se compose actuellement de 7 colonnes. Vous devez concevoir un tableau avec 1 ligne et 7 colonnes, insérer le texte de navigation dans chaque étiquette de cellule, puis centrer le texte de chaque cellule. Vous pouvez jeter un œil au code d'implémentation :


 

Comme vous pouvez le voir dans le code, la largeur et la hauteur de le tableau est défini et définissez la marge de bordure sur 0 pour masquer les lignes du tableau, puis définissez l'alignement du texte de la cellule au centre pour obtenir une navigation simple. Le point clé ici est de concevoir un tableau de données similaire au formulaire de navigation, et connectez la navigation à chacun dans une grille de données. Voyons comment concevoir le même système de navigation en utilisant CSS.
Le cœur de la mise en page DIV+CSS est de réaliser la séparation des performances et du contenu. Comprenons d'abord la méthode d'écriture de code de la partie contenu :