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

来源：互联网发布：51单片机与32 编辑：程序博客网时间：2024/05/15 08:06

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