CSS implémente la barre de navigation de premier niveau-tutoriel CSS-php.cn

CSS implémente la barre de navigation de premier niveau

php中世界最好的语言

Libérer： 2018-03-22 13:04:36

original

3348 Les gens l'ont consulté

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>

Copier après la connexion

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

Copier après la connexion

L'effet d'affichage est le suivant :

2. la balise

#nav ul{
    list-style: none;
}

Copier après la connexion

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

Copier après la connexion

Effet final :

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

Copier après la connexion

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>

Copier après la connexion

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