网页设置导航条

如果浏览器可使用HTML5，则使用<nav>标签（IE9+支持）；若要兼容低版本浏览器，就要使用<div>标签。

垂直的导航条

1  /*list-style:none;是清除ul标签自带的样式，不设置高度height是因为可以靠li来撑开*/
2 ul{list-style:none;width:100px;}
3  /*text-decoration:none;清除a标签的下划线；display:block;将a标签变成块元素，这样才能给a标签设置宽高和背景*/
4  a{text-decoration:none;display:block;}
5  /*line-height:30px;是保证文字垂直居中；text-align:center;是保证文字水平居中，宽度width可以继承父类的*/
6  li{height:30px;line-height:30px;text-align:center;}

精简代码：

1  ul{list-style:none;width:100px;}
2  /*在将a标签变为块元素后，可以直接把li标签的属性都复制过来，直接对a标签使用*/
3  a{text-decoration:none;display:block;height:30px;line-height:30px;text-align:center;}

水平的导航条

方法一：

1 /*去掉ul的宽度，不然不会水平排列*/
2 ul{list-style:none;}
3 li{float:left;}
4 a{text-decoration:none;display:block;height:30px;line-height:30px;text-align:center;}

方法二：

1 ul{list-style:none;}
2 li{display:inline-block;}
3 a{text-decoration:none;display:block;height:30px;line-height:30px;text-align:center;}

方法三（需兼容CSS3）：

 ul{
 height:30px;
 list-style: none;
 }
 li{
 width: 30%;/*这个数字可以自己根据导航内容个数设置*/
 box-sizing:border-box;
 -moz-box-sizing:border-box; /* Firefox */
-webkit-box-sizing:border-box; /* Safari */
 float:left;
 }
a{
text-decoration:none;
display:block;
line-height:30px;
text-align:center;
 }