领航效果 _Web前端

导航效果

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<link href="style.css" media="screen" rel="stylesheet" type="text/css" />
<div id="pagewrapper">
  <div id="header">
    <ul class="menu">
      <li class="current_page_item">
        <a href="">Home</a>
      </li>
      <li class="page_item">
        <a href="">Home</a>
      </li>
      <li class="page_item">
        <a href="">Home</a>
      </li>
    </ul>
  </div>
</div>

样式如下：

#pagewrapper{width:980px;margin:0 auto;}
#header{background:url(img/header.png) no-repeat center bottom;padding:30px 10px 80px;position:relative;}
#header ul.menu{position:relative;top:23px;height:32px;left:30px;list-style:none;margin:0;padding:0;right:30px;}
#header ul.menu li{float:left;margin:0 5px 0 0;padding:0 0 5px 5px;background:none;list-style:none;position:relative;}
#header ul.menu li a,
#header ul.menu .current_page_item a{font:bold 95%/100% Arial, Helvetica, sans-serif;padding:9px 12px 10px 8px;display:block;text-decoration:none;color:#cbc3bb;text-shadow:0 1px 1px #1f1206;}
#header ul.menu .current_page_item,#header ul.menu li:hover,#header ul.menu li:focus{background:url(img/nav-bg.png) no-repeat;}
#header ul.menu .current_page_item a{background:url(img/nav-bg.png) no-repeat right -85px;color:#fff;}
#header ul.menu li:hover a, #header ul.menu li:focus a{background:url(img/nav-bg.png) no-repeat right -85px;}

看看效果：