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

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

<meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>nav02</title> <style type="text/css"> *{ margin:0; padding:0; } .mainNav{ margin:0 20px; height:47px; border-bottom:2px solid #000; } ul{ margin:20px; margin-bottom:0; padding-left:20px; list-style-type:none; font-size:12px; position:absolute; } ul li{ float:left; margin-right:5px; } ul li a{ display:block; width:100px; line-height:25px; text-align:center; color:#999; background-color:#FC0; border:2px solid #000; } ul li a:hover{ height:27px; background-color:#F60; border-bottom:none; } #nav01 ul li a#nav001, #nav02 ul li a#nav002, #nav03 ul li a#nav003{ width:100px; height:27px; color:#FFF; background-color:#F60; border:2px solid #000; border-bottom:none; } .con{ margin:0 20px; padding:20px; color:#FFF; background-color:#F60; border:2px solid #000; border-top:none; } </style> <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 !

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