背景图片美化导航菜单

  作者:会飞的

<!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

<!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=utf-8" />

<style type="text/css">

<!--

#nav ul { list-style: none; margin: 0px auto; padding: 0px; border-bottom:3px solid #E10001; height:28px; width:360px; }

#nav li { float: left; margin-left: 2px; }

#nav a { display: block; width:87px; height: 28px; line-height: 28px; text-align:center; color: #000000; background:url(nav_bg2.gif) 0 0 no-repeat; text-decoration: none; }

#nav a:hover { color: #f00; background:url(nav_bg3.gif) 0 0 no-repeat; }

#nav a#current { background:url(nav_bg1.gif) 0 0 no-repeat; font-weight:bold; color:#fff;}

-->

</style>

</head>

<body>

<div id="nav">

  <ul>

    <li><a id="current" href="#">首页</a></li>

    <li><a href="#">入门教程</a></li>

    <li><a href="#">视频教程</a></li>

    <li><a href="#">常见问题</a></li>

  </ul>

</div>

</body>

</html>