.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" target="_blank" rel="external nofollow" />
</head>
<body>
<div class="page">
<div class="banner"></div>
<div class="nav">
<ul>
<li><a href="" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" >首頁</a></li>
<li><a href="" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" >義工新聞</a></li>
<li><a href="" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" >義工之家</a></li>
<li><a href="" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" >法律法規</a></li>
<li><a href="" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" >義工招募</a></li>
<li><a href="" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" >求援求助</a></li>
<li><a href="" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" >榮譽榜</a></li>
<li><a href="" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" >義工社群</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下圖：
page_04下圖：
