您的位置：首页 > Web前端 > CSS

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

2012-10-02 11:12 931 查看

咱们这节主要讲解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来设置菜单，这很便于我们后期的维护。

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航