recherche

Maison  >  Article  >  interface Web  >  Créer une navigation de premier niveau avec div+css

Créer une navigation de premier niveau avec div+css

零下一度
零下一度original
2017-04-28 11:01:371929parcourir

Cet article explique principalement comment créer une barre de navigation simple. Il a une certaine valeur de référence, jetons un oeil avec l'éditeur ci-dessous

Aujourd'hui, je vais partager comment créer une barre de navigation simple :

Étape 1 : Introduire une feuille de style CSS et créez un nouveau calque A avec l'identifiant nav utilise les balises ff6d136ddc5fdfeffaf53ff6ee95f185, 25edfb22a4f469ecb59f1190150159c6, 3499910bf9dac5ae3c52d5ede7383485 

<!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 ff6d136ddc5fdfeffaf53ff6ee95f185 >

#nav ul{
    list-style: none;
}

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

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

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：Utilisez CSS pour implémenter un code d'effets spéciaux triangulaires transparentsArticle suivant：Utilisez CSS pour implémenter un code d'effets spéciaux triangulaires transparents

Articles Liés

Voir plus