水平导航栏

创建水平导航栏步骤

步骤一：创建一个项目列表（文本 → 列表 → 项目列表）

<ul>

</ul>

效果如下：

步骤二：隐藏li的默认样式

定义CSS如下:

<!--

/*表示定义的样式将作用在menunav的层里的ul标签上。*/

.menunav ul{

list-style-type: none; /*不显示项目符号*/

}

-->

</style>

将菜单置入<div>中，如下：

<ul>

</ul>

</div>

效果如下：

步骤三：将菜单变成横向

定义CSS如下:

.menunav li{

float:left;

}

效果如下：

学生信息学费信息报到信息就业信息

步骤四：调整宽度

在CSS中添加定义width:100px, 修改后CSS如下：

.menunav li{

float:left;

width:100px;

}

效果如下：

学生信息　学费信息　报到信息　就业信息

步骤五：设置基本链接效果

设置链接的CSS如下：

.menunav a:link{color:#666;background:#CCC;text-decoration:none;}

.menunav a:visited{color:#666;text-decoration:underline;}

.menunav a:hover{

color:#FFF;

font-weight:bold;

text-decoration:underline;

background:#F00;

}

步骤六：将链接以块级元素显示

在a　的样式定义中增加display:block，使链接以块级元素显示，这时菜单链接的背景色填满整个li的宽度。

修改CSS如下：

.menunav a{

　　 display:block；

　　 text-align:center;/*将菜单文字居中*/

height:30px; /*用height:30px增加背景的高度；*/

}

.menunav li{

　　 float:left;

width:100px;

background:#CCC;

margin-left:3px; /*3px使每个菜单之间空3px距离*/

line-height:30px; /*定义行高，使链接文字纵向居中*/

}