JAVA竖向导航栏,css实现横向导航和竖向导航栏的方法（代码）

本篇文章给大家带来的内容是关于css实现横向导航和竖向导航栏的方法(代码)，有一定的参考价值，有需要的朋友可以参考一下，希望对你有所帮助。

一、竖向导航

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;

}

• 首页
• 学习中心
• 考试中心
• 考试动态

运行结果：

二、横向导航：

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;

}

• 首页
• 学习中心
• 考试中心
• 考试动态

运行结果：

注意：

1、a标签的display=block让链接是一个可点击的区域而不是文本。

2、a链接指定为block块元素之后可以设置宽度，让每个链接的宽度看起来一样。

相关推荐：