先看效果图：
代码如下：
首先是style：
#di1{
border: 1px solid #D3D3D3;
width: 700px;
height: 500px;
background-color: azure;
}
p{
font-size: 10px;
color: #008000;
}
#di2{
border: 1px solid #FFFFFF;
width: 400px;
height: 400px;
}
#di3{
border: 1px solid #FFFFFF;
width: 400px;
height: 40px;
margin-left: 1.25rem;
}
#di4{
border: 1px solid #FFFFFF;
width: 400px;
height: 100px;
margin-left: 1.25rem;
}
.cla3{
text-align: center;
}
.disc{list-style-type: disc;}

下面是body代码：

留言板                          科技工作建言者

发表留言

姓 名：

电子邮件：

分 类：科技工作者建言 不保密 保密   留言类型： 科技 生活

</p><p id="di4"><p>留 言:<textarea rows="5" cols="35" >请输入您的内容</textarea></p></p><p id="di3"><p style="color: #008000;">注：如果您的留言不便公开，请选择"保密"选项，提交后可凭系统反馈给您的留言编号、查询密码和您的姓名查询回复。</p></p><p id="di3" class="cla3"><input type="submit" name="submit" value="提交" />&emsp;&emsp;<input type="reset" name="reset" value="清空" /></p><p id="di5"><ul class="disc" style="color: #008000;font-size: 10px;"><li>请遵守国家有关法律、法规，尊重网上道德，承担一切因您的行为而直接或间接引起的法律责任。</li><li>本网站拥有管理笔名和留言的一切权利。</li></ul></p></form></p></p></p>