注意:

1、li列表前面默认有小圆点,有时候为了美观需要去掉多余的小圆点,可以使用CSS中的list-style:none这个属性,当然也可以在列表前面加一些图片。

2、为了让页面更具有吸引力,导航一般都会用到伪类元素,最常见的就是hover,它可以实现鼠标经过导航时,改变导航的背景颜色,字体大小,图片等等。

3、巧妙使用CSS中的display属性。如果需要让li具有高度和宽度,并且需要调节菜单内容的位置,必须将display属性值设置为block,将其变成块级元素后,padding,text-align等属性才起作用。

一、display:inline实现ul横向排列

用ulli做一个横向导航,实现鼠标经过时,背景颜色改变。代码如下:

HTML部分:

<ulid="nav">

<li>首页</li>

<li>课程介绍</li>

<li>师资力量</li>

<li>新闻动态</li>

<li>联系我们</li>

</ul>

CSS部分:

<styletype="text/css">

#nav{

margin:50pxauto;

height:40px;

background-color:#690;

}

#navul{

list-style:none;

margin-left:50px;

}

#navli{

display:inline;

}

#nava{

line-height:40px;

color:#fff;

text-decoration:none;

padding:20px20px;

}

#nava:hover{

background-color:#060;

}

</style>