精通CSS.DIV网页样式与布局（七）——制作实用菜单

最新推荐文章于 2025-06-06 14:59:57 发布

原创

最新推荐文章于 2025-06-06 14:59:57 发布 · 6.7k 阅读

4 ·

CC 4.0 BY-SA版权

本文介绍了如何使用CSS来制作各种网页菜单，包括项目列表、无表格菜单、横竖转换及Tab菜单。通过示例代码展示了如何设置列表符号、图片符号，以及如何使用ul和li元素构建超链接菜单，并实现菜单的横竖布局切换，强调了CSS在菜单设计中的灵活性和维护便利性。

咱们这节主要讲解CSS如何制作网页中采用的菜单，其中包括项目列表、无需表格的菜单、菜单的横竖装换以及流行的Tab菜单。

我们首先看项目列表：列表的符号；我们看看代码：

<html>
<head>
<title>项目列表</title>
<style>
<!--
body{
	background-color:#c1daff;
}
ul{
	font-size:0.9em;
	color:#00458c;
	list-style-type:decimal;		/* 项目编号 */
}
-->
</style>
   </head>
<body>
<p>水上运动</p>
<ul>
	<li>freestyle 自由泳</li>
	<li>backstroke 仰泳</li>
	<li>breaststroke 蛙泳</li>
	<li>butterfly 蝶泳</li>
	<li>individual medley 个人混合泳</li>
	<li>freestyle relay 自由泳接力</li>
</ul>
</body>
</html>