想让绿色框在黑色框上下左右都对其，怎么修改
想让绿色框在黑色框上下左右都对其，求助如何修改？
------解决思路----------------------
safari下
------解决思路----------------------
这样？
<!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>无标题文档</title>
<style type="text/css">
body
{
background-color:#000;
}
#form01{color:#FFF;}
#myform
{
position:relative;
margin-left:auto;
margin-right:auto;
}
.table1 td{border:1px dashed #cccccc;
height:30px;
}
.table1{
border:1px dashed #cccccc;
position:relative;
margin-left:auto;
margin-right:auto;
margin-top:200px;
}
#footer{
margin-top:20px;
color:#FFF;
}
#pic2
{
position:relative;
margin-top:100px;
background-image:url(web.jpg);
background-repeat:repeat-x;
height:150px;
color:#F00;
}
#zi
{
position:relative;
margin-top:10px;
margin-left:100px;
color:#FFF;
height:30px;
background:#FFF;
}
#zi ul
{
list-style:none;
width:570px;
margin-left:auto;
margin-right:auto;
background:#000;
height:30px;
text-align:center
}
#zi ul li
{
float:left;
width:70px;
color:#F00;
background:#0F0;
display:block;
position:relative;
margin-left:10px;
text-align:center;
}
</style>
</head>
<body>
<div id="zi">
<ul>
<li>网站首页</li>
<li>公司简介</li>
<li>最新动态</li>
<li>服务项目</li>
<li>优惠活动</li>
<li>特色婚礼</li>
<li>在线留言</li>
</ul>
</div>
<div id="pic2">
</div>
<div align="center" id="form01">
<form action="" method="get" name="form1">
<table width="900" border="" class="table1">
<tr>
<td align="right" width="30%">姓 名:</td>
<td width="40%"><input name="name" type="text" id="name" size="20" maxlength="20" /></td>
<td width="30%"> </td>
</tr>
<tr>
<td align="right">昵 称:</td>
<td ><input name="name" type="text" id="name" size="20" maxlength="20" /></td>
<td> </td>
</tr>
<tr>
<td align="right">性 别:</td>
<td ><select name="">
<option>男</option>
<option>女</option>
</select></td>
<td> </td>
</tr>
<tr>
<td align="right">爱 好:</td>
<td >
<label><input type="checkbox" name="checkbox1" value="checkbox">书法 </label>
<label><input type="checkbox" name="checkbox2" value="checkbox"> 写作</label>
<label><input type="checkbox" name="checkbox3" value="checkbox"> 音乐</label>
<label><input type="checkbox" name="checkbox4" value="checkbox"> 舞蹈</label>
<label><input type="checkbox" name="checkbox4" value="checkbox">运动</label>
</td>
<td> </td>
</tr>
<tr>
<td align="right">联系 QQ:</td>
<td ><input name="name" type="text" id="name" size="20" maxlength="20" /></td>
<td> </td>
</tr>
<tr>
<td align="right">联系电话:</td>
<td ><input name="name" type="text" id="name" size="20" maxlength="20" /></td>
<td> </td>
</tr>
<tr>
<td align="right">电子邮箱:</td>
<td ><input name="name" type="text" id="name" size="30" maxlength="30" /></td>
<td> </td>
</tr>
<tr>
<td align="right">上传头像:</td>
<td ><input type="file" size="35" maxlength="35" /></td>
<td> </td>
</tr>
<tr>
<td align="right">留言主题:</td>
<td ><input name="name" type="text" id="name" size="20" maxlength="20" /></td>
<td> </td>
</tr>
<tr>
<td align="right">留言类别:</td>
<td > <label>
<input type="radio" name="RadioGroup1" value="单选" id="RadioGroup1_0" />
意见建议</label>
<label>
<input type="radio" name="RadioGroup1" value="单选" id="RadioGroup1_1" />
留言咨询</label>
<label>
<input type="radio" name="RadioGroup1" value="单选" id="RadioGroup1_2" />
用户投诉</label></td>
<td> </td>
</tr>
<tr>
<td align="right">留言内容:</td>
<td ><textarea name="content" cols="40" rows="8" id="content"></textarea></td>
<td> </td>
</tr>
</table>
</form>
<table>
<td align="center" class="last">
<input name="submit" type="submit" id="submit" value="发布留言" height="30px"/>
<input name="reset" type="reset" id="reset" value="重置留言" height="30px"/>
</td>
</table>
</div>
<div id="footer" align="center">
关于我们 |
联系我们 |
商户联盟 |
友情链接 |
反馈问题
</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" />
<title>无标题文档</title>
<style type="text/css">
/*
body
{
background-color:#000;
}
*/
body {
background-color: #999;
}
#form01{color:#FFF;}
#myform
{
position:relative;
margin-left:auto;
margin-right:auto;
}
.table1 td{border:1px dashed #cccccc;
height:30px;
}
.table1{
border:1px dashed #cccccc;
position:relative;
margin-left:auto;
margin-right:auto;
margin-top:200px;
}
#footer{
margin-top:20px;
color:#FFF;
}
#pic2
{
position:relative;
margin-top:100px;
background-image:url(web.jpg);
background-repeat:repeat-x;
height:150px;
color:#F00;
}
/*
#zi
{
position:relative;
margin-top:10px;
margin-left:100px;
color:#FFF;
height:30px;
background:#FFF;
}
*/
#zi {
background: none repeat scroll 0 0 #fff;
color: #fff;
height: 27px;
margin-left: 100px;
margin-top: 10px;
position: relative;
}
/*
#zi ul
{
list-style:none;
width:570px;
margin-left:auto;
margin-right:auto;
background:#000;
height:30px;
text-align:center
}
*/
#zi ul {
background: none repeat scroll 0 0 #000;
height: 25px;
list-style: none outside none;
margin-left: auto;
margin-right: auto;
padding-top: 3px;
text-align: center;
width: 570px;
}
/*
#zi ul li
{
float:left;
width:70px;
color:#F00;
background:#0F0;
display:block;
position:relative;
margin-left:10px;
text-align:center;
}
*/
#zi ul li {
background: none repeat scroll 0 0 #0f0;
color: #f00;
display: block;
float: left;
padding-top:1px;
padding-bottom:1px;
margin-left: 10px;
position: relative;
text-align: center;
width: 70px;
height:20px;
}
</style>
</head>
<body>
<div id="zi">
<ul>
<li>网站首页</li>
<li>公司简介</li>
<li>最新动态</li>
<li>服务项目</li>
<li>优惠活动</li>
<li>特色婚礼</li>
<li>在线留言</li>
</ul>
</div>
<div id="pic2">
</div>
<div align="center" id="form01">
<form action="" method="get" name="form1">
<table width="900" border="" class="table1">
<tr>
<td align="right" width="30%">姓 名:</td>
<td width="40%"><input name="name" type="text" id="name" size="20" maxlength="20" /></td>
<td width="30%"> </td>
</tr>
<tr>
<td align="right">昵 称:</td>
<td ><input name="name" type="text" id="name" size="20" maxlength="20" /></td>
<td> </td>
</tr>
<tr>
<td align="right">性 别:</td>
<td ><select name="">
<option>男</option>
<option>女</option>
</select></td>
<td> </td>
</tr>
<tr>
<td align="right">爱 好:</td>
<td >
<label><input type="checkbox" name="checkbox1" value="checkbox">书法 </label>
<label><input type="checkbox" name="checkbox2" value="checkbox"> 写作</label>
<label><input type="checkbox" name="checkbox3" value="checkbox"> 音乐</label>
<label><input type="checkbox" name="checkbox4" value="checkbox"> 舞蹈</label>
<label><input type="checkbox" name="checkbox4" value="checkbox">运动</label>
</td>
<td> </td>
</tr>
<tr>
<td align="right">联系 QQ:</td>
<td ><input name="name" type="text" id="name" size="20" maxlength="20" /></td>
<td> </td>
</tr>
<tr>
<td align="right">联系电话:</td>
<td ><input name="name" type="text" id="name" size="20" maxlength="20" /></td>
<td> </td>
</tr>
<tr>
<td align="right">电子邮箱:</td>
<td ><input name="name" type="text" id="name" size="30" maxlength="30" /></td>
<td> </td>
</tr>
<tr>
<td align="right">上传头像:</td>
<td ><input type="file" size="35" maxlength="35" /></td>
<td> </td>
</tr>
<tr>
<td align="right">留言主题:</td>
<td ><input name="name" type="text" id="name" size="20" maxlength="20" /></td>
<td> </td>
</tr>
<tr>
<td align="right">留言类别:</td>
<td > <label>
<input type="radio" name="RadioGroup1" value="单选" id="RadioGroup1_0" />
意见建议</label>
<label>
<input type="radio" name="RadioGroup1" value="单选" id="RadioGroup1_1" />
留言咨询</label>
<label>
<input type="radio" name="RadioGroup1" value="单选" id="RadioGroup1_2" />
用户投诉</label></td>
<td> </td>
</tr>
<tr>
<td align="right">留言内容:</td>
<td ><textarea name="content" cols="40" rows="8" id="content"></textarea></td>
<td> </td>
</tr>
</table>
</form>
<table>
<td align="center" class="last">
<input name="submit" type="submit" id="submit" value="发布留言" height="30px"/>
<input name="reset" type="reset" id="reset" value="重置留言" height="30px"/>
</td>
</table>
</div>
<div id="footer" align="center">
关于我们
------解决思路----------------------
联系我们
------解决思路----------------------
商户联盟
------解决思路----------------------
友情链接
------解决思路----------------------
反馈问题
</div>
</body>
</html>
safari下
------解决思路----------------------
这样？