说到CSS导航栏，各种漂亮炫酷的样式都应有尽有，不过本文要介绍的是简单却又很实用的导航栏，分为水平导航栏和垂直导航栏两种样式。适合初学者学习使用，以及一些对设计要求不高的网页使用。

简单却实用的CSS水平和垂直导航栏

概述

这个简单的教程将教你如何通过CSS脚本在水平和垂直位置制作导航栏。导航栏是网页中的一个用户界面元素，其中包含指向网站其他部分的链接。在大多数情况下，导航栏是主网站模板的一部分，这意味着它会显示在网站上的大多数(如果不是全部)页面上。这意味着无论你正在查看哪个页面，都可以使用导航栏访问网站的其他部分。

样例代码

创建水平导航栏

HTML：

水平导航栏

CSS脚本：

.horizontal-menu ul {

list-style-type: none;

margin: 0;

padding: 0;

overflow: hidden;

background-color: #0018c3;

}

.horizontal-menu li a {

display: block;