Ce que cet article vous apporte concerne la méthode (code) de CSS pour implémenter la navigation horizontale et la barre de navigation verticale. Il a une certaine valeur de référence. Les amis dans le besoin peuvent s'y référer.
1. Navigation verticale
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<style>
ul{
list-style-type:none;
margin:0;
padding:0;
}
a{
display:block;
background-color:green;
color:white;
width:80px;
text-align:center;
padding:4px;
text-decoration:none;
}
a:hover,a:active{
background-color:#98bf21;
}
</style>
</head>
<body>
<ul>
<li><a herf="">首页</a></li>
<li><a herf="">学习中心</a></li>
<li><a herf="">考试中心</a></li>
<li><a herf="">考试动态</a></li>
</ul>
</body>
</html>Résultat de l'exécution :
2. Navigation horizontale :
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<style>
ul{
list-style-type:none;
margin:0;
padding:0;
overflow:hidden;
}
li{
float:left;
}
a{
display:block;
background-color:pink;
color:white;
width:80px;
text-align:center;
padding:4px 0px;
text-decoration:none;
}
a:hover,a:active{
background-color:gray;
}
</style>
</head>
<body>
<ul>
<li><a herf="">首页</a></li>
<li><a herf="">学习中心</a></li>
<li><a herf="">考试中心</a></li>
<li><a herf="">考试动态</a></li>
</ul>
</body>
</html>Exécuter les résultats :
Remarque :
1 Le display=block de la balise a fait du lien une zone cliquable à la place. de texte.
2. Après avoir spécifié un lien comme élément de bloc, vous pouvez définir la largeur pour que la largeur de chaque lien soit la même.
Recommandations associées :
barre de navigation CSS div (barre de navigation CSS plein écran)_html/css_WEB-ITnose
CSS image Navigation_html/css_WEB-ITnez
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!
Comment résoudre l'erreur 504 dans CDN
Quels sont les développements secondaires courants en PHP ?
Comment configurer les variables d'environnement Tomcat
Que sont les identifiants Python ?
Comment utiliser le retour en langage C
Raisons pour lesquelles l'imprimante Windows n'imprime pas
Explication détaillée de la configuration de nginx
Introduction aux types d'interfaces de disque dur
![[Web front-end] Démarrage rapide de Node.js](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
