.html代码如下：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<title>512义工新闻</title>
<link rel="stylesheet" type="text/css" href="css/style.css"/> 
</head>

<body>
  <div class="page">
    <div class="banner"></div>
    <div class="nav">
      <ul>
        <li><a href="">首页</a></li>
        <li><a href="">义工新闻</a></li>
        <li><a href="">义工之家</a></li>
        <li><a href="">法律法规</a></li>
        <li><a href="">义工招募</a></li>
        <li><a href="">求援求助</a></li>
        <li><a href="">荣誉榜</a></li>
        <li><a href="">义工社区</a></li>
      </ul>
      
    </div>
    <div class="log">
      <marquee width="460px" height="25px" scrollamount="1" direction="left" scrolldelay="10">招募公告：</marquee>
      <span class="login">
        <form>
          <label>用户名:</label><input type="text" class="input1"/>
          <label>密码:</label><input type="password" class="input1"/>
          <input type="submit" value="登陆"/>
        </form>
      </span>
    </div>
  </div>
  <div >
    
  </div>
  <div></div>
</body>
</html>


.css代码如下：

body{
  margin:0;
  font-size:12px;
  background:#c9c9c9;
}
.page{
  width:835px;
  margin:0 auto;
}
.banner{
  height:172px;
  background:url(../images/page_02.jpg);
}
.nav{
  <span style="color:#ff0000;">height:35px;</span>
  background:url(../images/page_04.gif);
  margin-top:-17px;
}
.nav ul{
  list-style:none;
  font-size:14px;
  color:#fff;
}
.nav ul li{
  float:left;
  width:80px;
  text-align:center;
  <span style="color:#ff0000;">line-height:35px;/*可以使字体垂直居中*/</span>
}
.nav ul li a{
  color:#fff;
  text-decoration:none;
}
.nav ul li a:hover{
  text-decoration:underline;
  color:#fba;
}
.log{
  <span style="color:#ff0000;">height:25px;</span>
}
.input1{
  width:100px;
}
.login{
  float:right;
}
marquee{
  <span style="color:#ff0000;">line-height:25px;</span><span style="color: rgb(255, 0, 0); font-family: Arial, Helvetica, sans-serif;">/*可以使字体垂直居中*/</span><span style="color:#ff0000;">
</span>
}


page_02下图：


html+css主页页眉实现_css

page_04下图：

html+css主页页眉实现_页眉_02

html+css主页页眉实现_html_03