本篇文章给大家带来的内容是关于css实现横向导航和竖向导航栏的方法（代码），有一定的参考价值，有需要的朋友可以参考一下，希望对你有所帮助。
一、竖向导航
<!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>运行结果：
二、横向导航：
<!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>运行结果：
注意：
1、a标签的display=block让链接是一个可点击的区域而不是文本。
2、a链接指定为block块元素之后可以设置宽度，让每个链接的宽度看起来一样。
相关推荐：
div css导航条(全屏css导航条)_html/css_WEB-ITnose
Atas ialah kandungan terperinci css实现横向导航和竖向导航栏的方法（代码）. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!
Pengenalan kepada penggunaan kod keseluruhan vbs
Bagaimana untuk menukar antara lebar penuh dan separuh lebar
Bagaimana untuk memaparkan dua div sebelah menyebelah
Tiga kaedah pengekodan yang biasa digunakan
Senarai lengkap kekunci pintasan idea
seni bina c/s dan seni bina b/s
Apakah perbezaan antara mysql dan mssql
Apakah fungsi utama redis?
![[Web front-end] Permulaan pantas Node.js](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
