Comment obtenir un effet de navigation Web avec CSS-Questions et réponses frontales-php.cn

Comment obtenir un effet de navigation Web avec CSS

PHPz

Libérer： 2023-04-25 11:32:12

original

1296 Les gens l'ont consulté

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;
    ...
}

Copier après la connexion

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>

Copier après la connexion

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
et placer tous les éléments HTML liés à la navigation dans cette balise.
Définissez une 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>

Copier après la connexion

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
afin de garantir que le menu puisse occuper la position verticale de l'ensemble du formulaire.
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!