Maison > Article > interface Web > code CSS pour implémenter la barre de navigation verticale et la barre de navigation horizontale
code CSS pour implémenter la barre de navigation verticale et la barre de navigation horizontale
- 不言original
- 2018-08-24 11:51:273819parcourir
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!