Le contenu de cet article concerne le code CSS pour implémenter la barre de navigation verticale et la barre de navigation horizontale. Il a une certaine valeur de référence. Les amis dans le besoin peuvent s'y référer.
Style de la barre de navigation verticale
<!DOCTYPE html > <html> <head> <meta charset="utf-8"> <title>自学教程(如约智惠.com)</title> <style > ul { list-style-type:none; margin:0; padding:0; } a:link, a:visited { display:block; font-weight:bold; color:#FFFFFF; background-color:#98bf21; width:120px; text-align:center; padding:4px; text-decoration:none; text-transform:uppercase; } a:hover, a:active { background-color:#7A991A; } </style> </head> <body> <ul> <li><a href="#home">主页</a></li> <li><a href="#news">新闻</a></li> <li><a href="#contact">联系</a></li> <li><a href="#about">关于</a></li> </ul> </body> </html>
Style de la barre de navigation horizontale
<!DOCTYPE html > <html> <head> <meta charset="utf-8"> <title>自学教程(如约智惠.com)</title> <style > ul { list-style-type:none; margin:0; padding:0; overflow:hidden; } li { float:left; } a:link, a:visited { display:block; font-weight:bold; color:#FFFFFF; background-color:#98bf21; width:120px; text-align:center; padding:4px; text-decoration:none; text-transform:uppercase; } a:hover, a:active { background-color:#7A991A; } </style> </head> <body> <ul> <li><a href="#home">主页</a></li> <li><a href="#news">新闻</a></li> <li><a href="#contact">联系</a></li> <li><a href="#about">关于</a></li> </ul> </body> </html>
Recommandations associées :
Css pour réaliser un tri d'images similaire aux galeries d'images (code complet)
Comment obtenir l'effet d'animation de la diffusion d'ondulations d'eau en CSS (code pur)
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!