列表导航栏范例（04）――精美模板赏析 _Web前端

列表导航栏实例（04）――精美模板赏析

【出处】http://www.instantshift.com/2009/09/29/99-high-quality-free-xhtmlcss-templates/

一、效果

二、HTML

<!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" />
    <link href="css/reset.css" rel="stylesheet" type="text/css" />
    <link href="css/layout.css" rel="stylesheet" type="text/css" />
    <title>无标题页</title>
</head>
<body>
    <div id="container">
        <div id="masthead">
            <h1>
                <a href="#">Portfolio Web Design</a></h1>
            <ul>
                <li id="home"><a href="">Home</a></li>
                <li id="portfolio"><a href="#">Portfolio</a></li>
                <li id="services"><a href="#">Services</a></li>
                <li id="contact"><a href="#">Contact</a></li>
            </ul>
        </div>
    </div>
</body>
</html>

三、CSS

body {
  background:#ccc url(../images/body-bg.jpg) repeat-x 0 0;
}
#container {
  width:950px;
  margin:0 auto;
}
#masthead h1 {
  display:block;
  float:left;
  width:269px;
  height:121px;
  text-indent:-9999px;
}
#masthead h1 a {
  display:block;
  width:100%;
  height:100%;
  background:url(../images/logo.jpg) no-repeat 0 0;
  outline:none;
}
#masthead ul {
  display:block;
  float:left;
  height:121px;
  list-style:none;
  background:url(../images/nav-sprite.jpg) no-repeat 0 0;
}
#masthead ul li {
  display:block;
  height:121px;
  float:left;
}
#home {
  width:115px;
}
#portfolio {
  width:160px;
}
#services {
  width:144px;
}
#contact {
  width:147px;
}
#masthead ul li a {
  display:block;
  width:100%;
  height:100%;
  text-indent:-9999px;
  outline:none;
}
li#home a:hover {
  background:url(../images/nav-sprite.jpg) no-repeat 0 -121px;
}
li#portfolio a:hover {
  background:url(../images/nav-sprite.jpg) no-repeat -115px -121px;
}
li#services a:hover {
  background:url(../images/nav-sprite.jpg) no-repeat -275px -121px;
}
li#contact a:hover {
  background:url(../images/nav-sprite.jpg) no-repeat -419px -121px;
}