菜单列表信息采用ul/li标签进行标记，当前页面所对应的菜单项用id＝“current”进行标识，鼠标移动到的菜单项通过伪元素a:hover进行选择。首先让每个li元素水平排列，并去掉前面的列表符；然后设置＃current对象的字体颜色和背景色；最后设置a:hover对象的字体颜色和背景色。就这么简单，一切ok!
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>www.itcast.cn</title>
<style type="text/css">
* {
font-size:12px;
text-align:center;
}
body {
background:#f0f0f0;
}
#nav {
width:700px;
margin:20px auto;
background:#f3c3f3;
padding:8px 12px;
list-style-type: none;
}
#nav li {
display: inline;
margin-right:8px;
}
#nav li a{
text-decoration: none;
color:#000;
}
#nav li a:hover {
color:#fff;
background-color:#c3f3c3;
}
#nav li a#current {
color:#c00;
background-color:#ccc;
}
</style>
</head>
<body>
<ul id="nav">
<li><a href="http://www.itcast.cn" id="current">java培训</a></li>
<li><a href="http://www.itcast.cn/">.net培训</a></li>
<li><a href="http://www.itcast.cn/">oracle培训</a></li>
<li><a href="http://www.itcast.cn/">ejb培训</a></li>
<li><a href="http://www.itcast.cn/">工作流培训</a></li>
</ul>
</body>
</html>
如何要把上面的导航菜单栏改为类似csdn的blog后台的导航栏图片形式，可以采用一种简单方式，即设计3个用作标签页的图片，将它们作为菜单的3种状态的背景图片，由于我自己没有图片，下面只能示意一下了：
#nav li a:hover {
color:#fff;
background-image:url(/img/hover.gif);
}
#nav li a#current {
color:#c00;
background-image:url(/img/active.gif);
}
最后，我们可以把hover.gif,active.gif,normal.gif等表示3种状态的图片合并为一个图片，每种状态通过定位图片的坐标来分别显示不同的图片区域，csdn的blog后台的导航栏图片采用的就是这种方式,如下所示：
采用这种将多个图片合并为一个图片的代码如下：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>www.itcast.cn</title>
<style type="text/css">
* {
font-size:12px;
text-align:center;
}
body {
background:#f0f0f0;
}
#nav {
width:700px;
margin:20px auto;
background:#f3c3f3;
padding:8px 12px;
list-style-type: none;
}
#nav li {
display: inline;
margin-right:8px;
}
#nav li a{
background-image:url(http://writeblog.csdn.net/resources/images/tabrightF.gif);
text-decoration: none;
color:#000;
float:left;
padding:6px 15px 5px 10px;
margin-right:3px;
}
#nav li a:hover {
color:#fff;
background-position:right -42px;
}
#nav li a#current {
color:#c00;
}
</style>
</head>
<body>
<ul id="nav">
<li><a href="http://www.itcast.cn" id="current">java培训</a></li>
<li><a href="http://www.itcast.cn/">.net培训</a></li>
<li><a href="http://www.itcast.cn/">oracle培训</a></li>
<li><a href="http://www.itcast.cn/">ejb培训</a></li>
<li><a href="http://www.itcast.cn/">工作流培训</a></li>
</ul>
</body>
</html>
分享到：
相关推荐
1.8 水平导航条应用 69 实例044 图片按钮导航条 69 实例045 导航条的动画效果 71 实例046 不用图片实现质感导航条 72 1.9 下拉菜单式导航条 73 实例047 二级导航菜单 74 实例048 半透明背景的下拉菜单 76 实例049 ...
7.16 平滑滚动的导航菜单 7.17 图片的放大预览 7.18 实现平滑的图片动态缩放效果 7.19 自动适应的窗口背景 7.20 如何判断加载多张图片的完成状态 7.21 鼠标悬停时的图片放大 7.22 淡出图片，淡入另一幅图片 7.23 ...
10 实例012 带进度条的状态栏 11 实例013 状态栏中加入图标 12 1.4 导航菜单界面 12 实例014 OutLook界面 12 实例015 带导航菜单的主界面 14 实例016 图形化的导航界面 15 1.5 ...
实例015 带导航菜单的主界面 12 实例016 图形化的导航界面 14 1.5 特色程序界面 15 实例017 隐藏式窗体 15 实例018 类似Windows XP的程序界面 18 实例019 软件启动界面 19 实例020 以树形显示的程序界面 20 ...
实例015 带导航菜单的主界面 12 实例016 图形化的导航界面 14 1.5 特色程序界面 15 实例017 隐藏式窗体 15 实例018 类似Windows XP的程序界面 18 实例019 软件启动界面 19 实例020 以树形显示的程序界面 20 ...
网页技术方面应用包括网页背景颜色、字号字体设置、超链接、图文页面、菜单栏、顶部大图等网页基础知识点 一套优质的 网页设计应该包含 (具体可根据个人要求而定) 1. 页面分为页头、菜单导航栏（最好可下拉）、中间...
实例015 带导航菜单的主界面 12 实例016 图形化的导航界面 14 1.5 特色程序界面 15 实例017 隐藏式窗体 15 实例018 类似Windows XP的程序界面 18 实例019 软件启动界面 19 实例020 以树形显示的程序界面 20 ...
实例015 带导航菜单的主界面 12 实例016 图形化的导航界面 14 1.5 特色程序界面 15 实例017 隐藏式窗体 15 实例018 类似Windows XP的程序界面 18 实例019 软件启动界面 19 实例020 以树形显示的程序界面 20 ...