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

本文介绍了如何使用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。这句话表示项目列表符号采用空心圆进行表示。我们看一下这个浏览效果:

评论 2
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值