当前位置: 代码迷 >> HTML/CSS >> 精通CSS.DIV网页式样与布局(七)――制作实用菜单
  详细解决方案

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

热度:113   发布时间:2012-10-10 13:58:11.0
精通CSS.DIV网页样式与布局(七)――制作实用菜单

咱们这节主要讲解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。这句话表示项目列表符号采用空心圆进行表示。我们看一下这个浏览效果:


当然我们还可以设置不同显示方式,大家自己来试试;尽管ul显示的是无符号列表,但是在CSS中一样能设置列表符号。我们的CSS不但可以制作列表的符号,我们接下来试试图片符号,我们先看看效果:


我们看到这个跟上面咱们说的列表符号就不一样了,这里采用了图片做符号。我们看一下这个代码:

<html>
<head>
<title>图片符号</title>
<style>
<!--
body{
	background-color:#c1daff;
}
ul{
	font-family:Arial;
	font-size:13px;
	color:#00458c;
	list-style-image:url(icon1.jpg);	/* 图片符号 */
}
-->
</style>
   </head>
<body>
<p>自行车</p>
<ul>
	<li>Road cycling 公路自行车赛</li>
	<li>Track cycling 场地自行车赛</li>
	<li>sprint  追逐赛</li>
	<li>time trial 计时赛</li>
	<li>points race  计分赛</li>
	<li>pursuit  争先赛</li>
	<li>Mountain bike 山地自行车赛</li>
</ul>
</body>
</html>

代码里边的list-style-image后面跟了一个图片的链接。对于通常的html的设计者来说,最开始所制作的菜单,往往都得使用表格,将一个一个的超链接放进表格的单元格中,而当引入了ul和li项目符号之后,制作菜单通常使用的方法是使用ul和li标记,我们看一下是如何实现的:

<html>
<head>
<title>无需表格的菜单</title>
<style>
<!--
body{
	background-color:#ffdee0;
}
#navigation {
	width:200px;
	font-family:Arial;
}
#navigation ul {
	list-style-type:none;				/* 不显示项目符号 */
	margin:0px;
	padding:0px;
}
#navigation li {
	border-bottom:1px solid #ED9F9F;	/* 添加下划线 */
}
#navigation li a{
	display:block;						/* 区块显示 */
	padding:5px 5px 5px 0.5em;
	text-decoration:none;
	border-left:12px solid ;		/* 左边的粗红边 */
	border-right:1px solid #711515;		/* 右侧阴影 */
}
#navigation li a:link, #navigation li a:visited{
	background-color:#F5950B;
	color:#FFFFFF;
}
#navigation li a:hover{					/* 鼠标经过时 */
	background-color:#990020;			/* 改变背景色 */
	color:#ffff00;						/* 改变文字颜色 */
}
-->
</style>
   </head>
<body>
<div id="navigation">
	<ul>
		<li><a href="#">Home</a></li>
		<li><a href="#">My Blog</a></li>
		<li><a href="#">Friends</a></li>
		<li><a href="#">Next Station</a></li>
		<li><a href="#">Contact Me</a></li>
	</ul>
</div>
</body>
</html>

正文部分非常的简单,div id标记navigation,中间就是几个简单的项目列表,每一个子项都用一个a标记表示一个超链接,而代码中,最关键的几行,list-style-type:none 则不显示项目符号;li标记添加下划线。我们在a中设置统一设置了border-left:12px;以及border-right:1px;我们看一下显示效果:


我们在做网页的时候,有时候还需要横向的菜单来显示,而在CSS可以很轻松的进行横竖菜单的转换。我们先来看看效果:


我们来看看CSS代码:

<html>
<head>
<title>菜单的横竖转换</title>
<style>
<!--
body{
	background-color:#ffdee0;
}
#navigation {
	font-family:Arial;
}
#navigation ul {
	list-style-type:none;				/* 不显示项目符号 */
	margin:0px;
	padding:0px;
}
#navigation li {
	float:left;							/* 水平显示各个项目 */
}
#navigation li a{
	display:block;						/* 区块显示 */
	padding:3px 6px 3px 6px;
	text-decoration:none;
	border:1px solid #711515;
	margin:2px;
}
#navigation li a:link, #navigation li a:visited{
	background-color:#c11136;
	color:#FFFFFF;
}
#navigation li a:hover{					/* 鼠标经过时 */
	background-color:#990020;			/* 改变背景色 */
	color:#ffff00;						/* 改变文字颜色 */
}
-->
</style>
   </head>
<body>
<div id="navigation">
	<ul>
		<li><a href="#">Home</a></li>
		<li><a href="#">My Blog</a></li>
		<li><a href="#">Friends</a></li>
		<li><a href="#">Next Station</a></li>
		<li><a href="#">Contact Me</a></li>
	</ul>
</div>
</body>
</html>

首先这个body部分跟咱们刚才那个例子完全相同,所不同的仅仅是CSS的设置,便可以轻松的实现菜单的横竖转换,这就有利于我们在后期的维护中,如果我们需要把菜单从竖向转换成横向或者又横向转换成竖向,将十分的方便,这里就li属性float:left,而a属性还是一样设置边框等等。

通常在网页的设计中,经常的采用了ul,li来设置菜单,这很便于我们后期的维护。

  相关解决方案