CSS学习四： 菜单

1. CSS制作菜单

1.1. 项目列表

1. 顺序列表ol和无顺序列表ul.

2. 列表的符号(list-style-type)

CSS中项目列表的编号是通过list-style-type来修改的。无论是ul还是ol，都可以使用这个属性，然后再配合相应的li属性。也可以单独对li设置list-style-type属性。这个属性的值包括：

Disc，circle，square，decimal，upper-alpha，lower-alpha，

Upper-roman，lower-roman，none.

3. 图片符号（list-style-image）

通常设置了图片之后，发现在IE和Firefox上显示不一致，因此一般的做法是通过设置list-style-type为none，然后设置li的背景图片来实现的。{background-image: url(icon1.jpg);

background-repeat: no-repeat; padding-left: 25px;

background-position:left center;}

1.2. 无需表格的菜单

1. 通过li来设置菜单，每个li的左边框设置为12px，就会出现粗红边的效果。

2. 对a设置display:block之后，超链接就变成了块元素，当鼠标进入该块的时候，就会激活链接，而不是进入文字才激活。 对a设置hover时，需要先设置a:visited和a:link才可以。

1.3. 菜单的横竖转换

1. 横竖菜单的关键是float属性

2. 采用ul或者ol标记的菜单，如果没有设置width属性，则当浏览器变小的时候，菜单会自动的跟着收缩。

1.4. 实例

1. 百度导航条

2. Tab菜单：

一些技巧：

通过padding来下移某些元素。只能通过margin和padding来调整位置。

菜单案例，包括百度菜单，横竖菜单，tab菜单等：http://115.com/file/cl1uhnxh#