CSS pur pour réaliser la navigation par étiquettes production

CSS pur pour réaliser la navigation par étiquettes production_Experience Exchange

WBOY

Libérer： 2016-05-16 12:06:26

original

1845 Les gens l'ont consulté

Après une recherche sur Internet, je n'ai pas vu beaucoup de tutoriels ou d'instructions sur la création de navigation par étiquettes uniquement en utilisant CSS. La plupart d'entre eux impliquent l'écriture de JS. Ce n'est vraiment pas prévenant pour beaucoup de gens qui apprennent le CSS. Puisque personne ne l'a fait, laissez-moi d'abord l'essayer ! La navigation par étiquettes CSS que je fais ici est une navigation verte avec du CSS pur, pas de JS et pas d'image d'arrière-plan. Cet article convient aux débutants, les experts peuvent passer par là, haha !

<div class="mainNav">
        <ul>
            <li><a href="#" id="nav001">Script House 01</a></li>
            <li><a href="#" id="nav002">Script House 02</a></li>
            <li><a href="#" id="nav003">Script House 03</a></li>
        </ul>
    </div>
    <div class="con">Accueil des scripts <a href="</div">www.jb51.net</a>
</div>>

[Ctrl+A Tout sélectionner Remarque : Si vous devez introduire des J externes, vous devez actualiser pour exécuter ]

Copier le code Le code est le suivant :

.mainNav{ 
 margin:0 20px; 🎜> hauteur:47px; 
 border-bottom:2px solid #000; 
} 
ul{ 
 margin:20px 
 margin-bottom:0; 20px; -type:aucun; 
 font-size:12px; 
 position:absolute; 
ul li{ 
 float:left 
 margin-right:5px; 🎜> } 
ul li a{ 
 display:block; 
 width:100px 
 line-height:25px; 
 couleur d'arrière-plan : #FC0 ; > bordure-bas : aucun 
 hauteur : 27px 
 couleur : #FFF ; #000; 
 border-bottom:none; 
} 
.con{ 
 margin:0 20px; 
 padding:20px; couleur : #F60 ; 
 bordure : 2px solide #000 ; 
 bordure-haut : aucun 
} 






Copie ; code


 Le code est le suivant :

 
 " id="nav001">Ali Manman 01 ;                                                                                                                   🎜> 




En fait, le point clé est la commande position:absolute dans ul. , le contenu de la navigation ul devient un affichage en couche , ce qui équivaut à flotter sur le navigateur. Afin d'éviter que le contenu suivant ne remplisse le contenu de la partie ul, un div est placé à l'extérieur de l'ul, ce qui aide l'ul à occuper de l'espace. Ce div sert également d'arrière-plan ul. La clé de la navigation dans les étiquettes est la bordure inférieure. Après avoir tout lu, vous constaterez que c’est en fait très simple, mais la clé est d’avoir une idée. Très bien! Continuez à apprendre ! 