这个是我很久以前写过的一个留言板的布局 模板,(提供给新手门参考,请尊重原创劳动成果) 页面分享代码如下:
<!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" />
<title>CSS DIV 样式布局 III 头header 脚 footer 身 center </title>
<style type="text/css">
body {
font-family: "黑体";
font-size: 12px;
color: #000;
margin: 0px;
text-align:center;
margin-left: 20px;
margin-top: 50px;
margin-right: 20px;
margin-bottom: 20px;}
div#wrap {
width:800px;
margin:0 auto;
border:1px solid #333;
background-color:#ccc;
text-align:center;
background-image:url(images/bg_img04.jpg); }
div#header {
width:780px;
border:1px solid #333;
font-family: "宋体";
font-size: 14px;
color: #000;
text-align:center;
margin-left: 10px;
margin-top: 30px;
margin-right: 10px;
margin-bottom: 5px;}
div#footer{
width:780px;
border:1px solid #333;
font-family: "宋体";
font-size: 12px;
color: #000;
text-align:center;
margin-left: 10px;
margin-top: 30px;
margin-right: 10px;
margin-bottom: 8px; }
div#center{
width:780px;
border:1px solid #333;
font-family: "宋体";
font-size: 12px;
color: #000;
text-align:center;
margin:0 auto;
margin-left: 10px;
margin-top: 10px;
margin-right: 10px;
margin-bottom: 5px; }
a {
font-size: 14px;
color: #000;
font-family:"黑体"; }
a:link {
text-decoration: underline;
color: #009;}
a:visited {
text-decoration: underline;
color: #306;}
a:hover {
text-decoration: none;
color: #900;}
a:active {
text-decoration: underline;
color: #36C;}
</style>
</head>
<body>
<div id="wrap">
<table width="780" border="0" cellspacing="0" cellpadding="0">
<tr>
<td>
<div id="header">
<p><a href="#"><strong>添加新的留言内容</strong></a></p>
<p><strong>导航或标题</strong></p>
</div>
</td>
</tr>
<tr>
<td height="183" background="" >
<div id="center">
···················代码编辑区域······················
</div>
</td>
</tr>
<tr>
<td><div id="footer">Copyright © 2011 songyanjun, All Rights Reserved</div></td>
</tr>
</table>
</div>
</body>
</html>
Over !!!