如何使用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实现垂直导航栏和水平导航栏的方法了吗？如果还想学到更多技能或想了解更多相关内容，欢迎关注亿速云行业资讯频道，感谢各位的阅读！