本篇文章给大家带来的内容是关于css实现垂直导航栏和水平导航栏的代码，有一定的参考价值，有需要的朋友可以参考一下，希望对你有所帮助。
垂直导航栏的样式
<!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>水平导航栏的样式
<!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>相关推荐：
Atas ialah kandungan terperinci css实现垂直导航栏和水平导航栏的代码. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!
![[Web front-end] Permulaan pantas Node.js](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
