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

最新推荐文章于 2022-08-09 16:09:24 发布

陈宗毅

最新推荐文章于 2022-08-09 16:09:24 发布

阅读量6.6k

点赞数 9

分类专栏： CSS 深入浅出讲解CSS+DIV

本文链接：https://blog.csdn.net/yi_zz/article/details/8035566

版权

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

摘要由CSDN通过智能技术生成

咱们这节主要讲解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>

正文部分很简单，ul无符号的项目列表，和一群li标记，在CSS代码中，单独对ul进行了标记，最主要的是：list-style-type:circle。这句话表示项目列表符号采用空心圆进行表示。我们看一下这个浏览效果：