interface Web
Questions et réponses frontales
Comment obtenir un effet de navigation Web avec CSS
Comment obtenir un effet de navigation Web avec CSS
La navigation est un élément très important dans le processus de production de pages Web. La navigation n'est pas seulement la fonction principale des pages Web, mais joue également un rôle dans l'embellissement des pages Web et l'amélioration de l'expérience utilisateur. Dans le processus d'embellissement et de conception de pages Web, CSS, en tant que feuille de style de la page Web, peut également être utilisé pour mettre en œuvre divers styles de navigation. Cet article présentera comment CSS implémente la navigation dans les pages Web.
Structure de base de la feuille de style CSS
La feuille de style CSS est largement utilisée dans la conception et la mise en page des pages Web. Sa structure de base est la suivante :
选择器{
属性1:属性值1;
属性2:属性值2;
...
}Le sélecteur fait référence au ou aux éléments à styliser. Les attributs font référence aux styles, tels que la couleur, la largeur, la hauteur, etc., tandis que les valeurs d'attribut font référence aux valeurs correspondant aux attributs. Lorsqu'une feuille de style est appliquée à un document HTML, les attributs de style qu'elle contient sont automatiquement appliqués aux éléments HTML correspondants.
Concepts de base du menu de navigation implémentés avec CSS
Lorsque vous utilisez des feuilles de style CSS pour concevoir des menus de navigation, vous devez maîtriser les concepts de base suivants :
- Éléments de menu : Chaque élément de navigation est un élément de menu.
- Éléments sélectionnés : les éléments de menu sélectionnés par l'utilisateur doivent également avoir des changements de style pour refléter leur statut sélectionné.
- État de survol : lorsque l'utilisateur survole un élément de menu, le style de l'élément de menu doit également changer pour indiquer à l'utilisateur que l'élément a un état cliquable.
Menu de navigation horizontale implémenté avec CSS
Ce qui suit présentera comment implémenter un menu de navigation horizontale de base via CSS. Cet élément de menu contient 5 options différentes. Lorsque l'utilisateur clique sur un élément de menu, la couleur d'arrière-plan de l'élément de menu correspondant change.
<!DOCTYPE html>
<html>
<head>
<title>CSS Horizontal Nav</title>
<style>
nav{
display: inline-block;
background: #e74c3c;
}
ul{
list-style: none;
margin: 0;
padding: 0;
display: flex;
}
li{
margin: 0;
padding: 0;
}
a{
color: #fff;
display: block;
padding: 10px;
text-decoration: none;
}
a:hover,
a:focus,
a:active{
background: #c0392b;
}
.active a{
background: #ffffff;
color: #e74c3c;
}
</style>
</head>
<body>
<nav>
<ul>
<li><a href="#" class="active">Home</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Services</a></li>
<li><a href="#">Portfolio</a></li>
<li><a href="#">Contact</a></li>
</ul>
</nav>
</body>
</html>En écrivant le code HTML et CSS ci-dessus, nous pouvons implémenter un menu de navigation horizontale de base. Parmi elles, la méthode d'implémentation spécifique est la suivante :
- Nous devons d'abord définir une balise
- Définissez une balise
- pour stocker les éléments de menu. Ici, nous utilisons la disposition élastique Flex pour organiser le menu de navigation "horizontalement". La balise
- Define style définit le style général des éléments de menu, y compris la couleur, le remplissage, etc.
- Définissez le changement de style en état de survol. Lorsque l'utilisateur survole un élément, nous devons ajouter une couleur d'arrière-plan à l'élément pour inviter l'utilisateur, et la couleur du texte correspondante doit également changer.
- Définissez le style à l'état actif. Lorsque l'utilisateur clique sur un élément, le style de l'étiquette correspondant à l'élément changera, comme la couleur de fond, afin que l'utilisateur puisse le distinguer.
Menu de navigation vertical implémenté par CSS
En plus d'implémenter un menu de navigation horizontal, CSS peut également implémenter la conception de menus de navigation verticale. Voici le code HTML d'un menu de navigation verticale de base :
<!DOCTYPE html>
<html>
<head>
<title>CSS Vertical Nav</title>
<style>
nav{
display: inline-block;
background: #2980b9;
height: 100%;
}
ul{
list-style: none;
margin: 0;
padding: 0;
}
li{
margin: 0;
padding: 0;
}
a{
color: #fff;
display: block;
padding: 10px;
text-decoration: none;
}
a:hover,
a:focus,
a:active{
background: #2c3e50;
}
.active a{
background: #ffffff;
color: #2980b9;
}
</style>
</head>
<body>
<nav>
<ul>
<li><a href="#" class="active">Home</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Services</a></li>
<li><a href="#">Portfolio</a></li>
<li><a href="#">Contact</a></li>
</ul>
</nav>
</body>
</html>L'implémentation est légèrement différente du menu de navigation horizontale. Nous devons faire attention aux points suivants :
- Définissez une largeur de 100 % de la hauteur pour la balise
- Implémentation du style de menu de navigation verticale de base, similaire au menu de navigation horizontale, sauf que les barres latérales sont disposées verticalement.
- Les changements de style en état de survol sont cohérents avec les menus de navigation horizontaux.
- Définissez le style à l'état actif, qui peut également être implémenté de la même manière que la navigation horizontale.
Résumé
Dans cet article, nous développons l'application du CSS dans la conception de la navigation Web à travers deux cas. Qu'il s'agisse d'un menu de navigation horizontal ou d'un menu de navigation vertical, CSS fournit une multitude de propriétés et de styles pour l'implémenter. J'espère que grâce à l'introduction de cet article, les lecteurs pourront approfondir davantage leur compréhension du CSS et fournir de l'aide pour les futurs travaux de conception Web.
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!
Outils d'IA chauds
Undresser.AI Undress
Application basée sur l'IA pour créer des photos de nu réalistes
AI Clothes Remover
Outil d'IA en ligne pour supprimer les vêtements des photos.
Undress AI Tool
Images de déshabillage gratuites
Clothoff.io
Dissolvant de vêtements AI
AI Hentai Generator
Générez AI Hentai gratuitement.
Article chaud
Outils chauds
Bloc-notes++7.3.1
Éditeur de code facile à utiliser et gratuit
SublimeText3 version chinoise
Version chinoise, très simple à utiliser
Envoyer Studio 13.0.1
Puissant environnement de développement intégré PHP
Dreamweaver CS6
Outils de développement Web visuel
SublimeText3 version Mac
Logiciel d'édition de code au niveau de Dieu (SublimeText3)
Qu'est-ce que l'utilisation Effecte? Comment l'utilisez-vous pour effectuer des effets secondaires?
Mar 19, 2025 pm 03:58 PM
L'article traite de l'utilisation Effecte dans React, un crochet pour gérer les effets secondaires comme la récupération des données et la manipulation DOM dans les composants fonctionnels. Il explique l'utilisation, les effets secondaires courants et le nettoyage pour éviter des problèmes comme les fuites de mémoire.
Comment fonctionne l'algorithme de réconciliation React?
Mar 18, 2025 pm 01:58 PM
L'article explique l'algorithme de réconciliation de React, qui met à jour efficacement le DOM en comparant les arbres DOM virtuels. Il traite des avantages de la performance, des techniques d'optimisation et des impacts sur l'expérience utilisateur. Compte de charge: 159
Quelles sont les fonctions d'ordre supérieur en JavaScript, et comment peuvent-ils être utilisés pour écrire du code plus concis et réutilisable?
Mar 18, 2025 pm 01:44 PM
Les fonctions d'ordre supérieur dans JavaScript améliorent la concision du code, la réutilisabilité, la modularité et les performances par abstraction, modèles communs et techniques d'optimisation.
Comment fonctionne le currying en JavaScript et quels sont ses avantages?
Mar 18, 2025 pm 01:45 PM
L'article traite du curry dans JavaScript, une technique transformant les fonctions mulguments en séquences de fonctions à argument unique. Il explore la mise en œuvre du currying, des avantages tels que des applications partielles et des utilisations pratiques, améliorant le code
Comment connectez-vous les composants React au magasin Redux à l'aide de Connect ()?
Mar 21, 2025 pm 06:23 PM
L'article discute de la connexion des composants React à Redux Store à l'aide de Connect (), expliquant MapStateToproprop, MapDispatchToprops et des impacts de performances.
Qu'est-ce que UseContext? Comment l'utilisez-vous pour partager l'état entre les composants?
Mar 19, 2025 pm 03:59 PM
L'article explique UseContext dans React, qui simplifie la gestion de l'État en évitant le forage des accessoires. Il traite des avantages tels que les améliorations centralisées de l'État et des performances grâce à des redevances réduites.
Comment empêchez-vous le comportement par défaut dans les gestionnaires d'événements?
Mar 19, 2025 pm 04:10 PM
L'article discute de la prévention des comportements par défaut dans les gestionnaires d'événements à l'aide de la méthode empêchée dedEfault (), de ses avantages tels que une expérience utilisateur améliorée et des problèmes potentiels tels que les problèmes d'accessibilité.
Quels sont les avantages et les inconvénients des composants contrôlés et incontrôlés?
Mar 19, 2025 pm 04:16 PM
L'article traite des avantages et des inconvénients des composants contrôlés et incontrôlés dans la réaction, en se concentrant sur des aspects tels que la prévisibilité, la performance et les cas d'utilisation. Il conseille les facteurs à considérer lors du choix entre eux.
