精通CSS.DIV网页式样与布局（七）——制作实用菜单
日期：2014-05-17 浏览次数：20906 次
精通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></l
免责声明： 本文仅代表作者个人观点，与爱易网无关。其原创性以及文中陈述文字和内容未经本站证实，对本文以及其中全部或者部分内容、文字的真实性、完整性、及时性本站不作任何保证或承诺，请读者仅作参考，并请自行核实相关内容。
