当前位置：Gxlcms > css > css实现垂直导航栏和水平导航栏的代码

css实现垂直导航栏和水平导航栏的代码

时间：2021-07-01 10:21:17 帮助过：9人阅读

本篇文章给大家带来的内容是关于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>

css实现垂直导航栏和水平导航栏的代码

人气教程排行