列表导航栏实例（04）——精美模板赏析
一、效果
二、HTML
[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>
<!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
[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;
}
补充：web前端 , HTML/CSS ,
