HTML与CSS（图解7）：项目列表

列表符号：使用 list-style-type 属性来控制

View Code

1

2

3

4

16

17

18

水上运动

19

20

• freestyle 自由泳

21

• backstroke 仰泳

22

• breaststroke 蛙泳

23

• butterfly 蝶泳

24

• individual medley 个人混合泳

25

• freestyle relay 自由泳接力

26

27

28

图片符号：使用 list-style-image 属性来控制

View Code

1

2

3

4

17

18

19

自行车

20

21

• Road cycling 公路自行车赛

22

• Track cycling 场地自行车赛

23

• sprint 追逐赛

24

• time trial 计时赛

25

• points race 计分赛

26

• pursuit 争先赛

27

• Mountain bike 山地自行车赛

28

29

30

注意：不同的浏览器，可能的结果有所不同。

此时，以上的设计， ul 或 ol 对列表的影响并不大

无需表格的菜单

View Code

1

2

3

37

38

39

48

49

实现的想法：

控制每个 li 下划线，使得有区分的效果；

通过 a ，统一设计左右边框；

通过 a：link，a:visited，a:hover的设计，使得效果更像一个连接；

把竖直列表转为横向列表：巧妙地使用 float 来设计

View Code

1

2

3

4

37

38

39

48

49

设计 Tab 菜单：巧妙地控制下划线的颜色来凸显显示效果

代码：待续