Maison > Article > interface Web > CSS implémente la barre de navigation de premier niveau

CSS implémente la barre de navigation de premier niveau

php中世界最好的语言original: 2018-03-22 13:04:363301parcourir

Cette fois, je vais vous apporter du CSS pour implémenter une barre de navigation de premier niveau. Quelles sont les précautions pour implémenter une barre de navigation de premier niveau avec CSS Voici des cas pratiques, jetons un oeil.

Première étape : introduisez la feuille de style CSS, créez un nouveau calque avec l'identifiant nav et utilisez les balises

, .

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <link rel="stylesheet" type="text/css" href="css/yiji.css"/>
    </head>
    <body>
        <p id="nav">
            <ul>
                <li><a href="">首页</a></li>
                
                <li><a href="">首页</a></li>
                
                <li><a href="">首页</a></li>
                
                <li><a href="">首页</a></li>
                
                <li><a href="">首页</a></li>
            </ul>
        </p>
    </body>
</html>

La deuxième étape consiste à définir le style CSS :

1. Définissez les attributs de nav .

#nav{
    width: 500px;
    height: 50px;
    border: 1px solid red;
}

L'effet d'affichage est le suivant :

2. la balise

#nav ul{
    list-style: none;
}

3. Définissez les attributs de la balise 🎜>

4. Réglez l'effet de survol de la souris

#nav ul li a{
    width: 98px;
    height: 50px;
    float: left;
    border: 1px solid red;
    text-align: center;
    line-height: 50px;
    text-decoration: none;
}

Effet final :

#nav ul li a:hover{
    background-color: #ABCDEF;
}

Partie complète du code HTML :

Partie complète du code de style CSS :

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <link rel="stylesheet" type="text/css" href="css/yiji.css"/>
    </head>
    <body>
        <p id="nav">
            <ul>
                <li><a href="">首页</a></li>
                 
                <li><a href="">首页</a></li>
                 
                <li><a href="">首页</a></li>
                 
                <li><a href="">首页</a></li>
                 
                <li><a href="">首页</a></li>
            </ul>
        </p>
    </body>
</html>

Je pense que vous avez lu le cas dans cet article. Vous maîtrisez la méthode. Pour des informations plus intéressantes, veuillez prêter attention aux autres articles connexes sur le site Web chinois de php !

Lecture recommandée :

*{
    margin: 0;
    padding: 0;
}
#nav{
    width: 500px;
    height: 50px;
    border: 1px solid red;
    margin: 30px;
}
#nav ul{
    list-style: none;
}
#nav ul li a{
    width: 98px;
    height: 50px;
    float: left;
    border: 1px solid red;
    text-align: center;
    line-height: 50px;
    text-decoration: none;
}
#nav ul li a:hover{
    background-color: #ABCDEF;
}

La différence entre le nième enfant et le nième de type en CSS3 et leurs techniques d'utilisation

css3 Explication détaillée du nouvel attribut box-sizing

CSS dessine un cœur rouge

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!

Déclaration：

Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn

Article précédent：Explication détaillée de l'utilisation du gradient linéaireArticle suivant：Explication détaillée de l'utilisation du gradient linéaire

Articles Liés

Voir plus