本篇文章给大家带来的内容是关于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!
Cara menggunakan DataReader
Penyelesaian untuk membahagikan jadual perkataan kepada dua muka surat
Pengenalan kepada kekunci pintasan tangkapan skrin dalam win8
Apa yang perlu dilakukan jika tiada kursor apabila mengklik pada kotak input
Pengenalan kepada penggunaan rowid dalam oracle
Penjelasan terperinci tentang konfigurasi nginx
Bagaimana untuk menyelesaikan kod kacau securecrt
Mengapa swole boleh bermastautin dalam ingatan?
![[Web front-end] Permulaan pantas Node.js](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
