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!