从最简单和朴素的水平导航菜单栏到复杂的图覆盖

菜单列表信息采用ul/li标签进行标记，当前页面所对应的菜单项用id＝“current”进行标识，鼠标移动到的菜单项通过伪元素a:hover进行选择。首先让每个li元素水平排列，并去掉前面的列表符；然后设置＃current对象的字体颜色和背景色；最后设置a:hover对象的字体颜色和背景色。就这么简单，一切ok!

!DOCTYPE html PUBLIC \"-//W3C//DTD XHTML 1.0 Transitional//EN\"

\"\"

html xmlns=\"\"

head

meta http-equiv=\"Content-Type\" content=\"text/html; charset=gb2312\" /

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\"

lia href=\"\" id=\"current\"java培训/a/li

lia href=\"\".net培训/a/li

lia href=\"oracle\'>\"oracle培训/a/li

lia href=\"\"ejb培训/a/li

lia href=\"\"工作流培训/a/li

/ul

/body

/html

如何要把上面的导航菜单栏改为类似csdn的blog后台的导航栏图片形式，可以采用一种简单方式，即设计3个用作标签页的图片，将它们作为菜单的3种状态的背景图片，由于我自己没有图片，下面只能示意一下了：

#nav li a:hover {

color:#fff;

background-image:url(/img/f);

}

#nav li a#current {

color:#c00;

background-image:url(/img/f);

}

最后，我们可以把f,f,f等表示3种状态的图片合并为一个图片，每种状态通过定位图片的坐标来分别显示不同的图片区域，csdn的blog后台的导航栏图片采用的就是这种方式,如下所示：

采用这种将多个图片合并为一个图片的代码如下：

!DOCTYPE html PUBLIC \"-//W3C//DTD XHTML 1.0 Transitional//EN\"

\"\"

html xmlns=\"\"

head

meta http-equiv=\"Content-Type\" content=\"text/html; charset=gb2312\" /

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(

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\"

lia href=\"\" id=\"current\"java培训/a/li

lia href=\"\".net培训/a/li

lia href=\"oracle\'>\"oracle培训/a/li

lia href=\"\"ejb培训/a/li

lia href=\"\"工作流培训/a/li

/ul

/body

/html

查看本文来源