商院官网：表单的布局
来自CloudWiki
网站原型
实训步骤
- 表单的布局一般可以使用表格进行布局
- 使用表格布局能让表单更加整齐
第一步，绘制表格
- 首先，在Word或白纸上绘制出你想做的表单。
- 然后在网页上绘制相应的表格
html:
<div class="layer2">
<form method="post">
<table id="apply">
<caption>出差申请单</caption>
<tr> <td class="col1">申请人：</td><td class="col2"></td> <td class="col3">所在部门：</td><td class="col4">信息与艺术学院</td>
</tr>
<tr> <td class="col1">交通方式：</td> <td class="col2"></td> <td class="col3">申请日期：</td><td class="col4"> 2019-12-7</td>
</tr>
<tr> <td class="col1"> 出差事由</td><td colspan="3"class="col5"></td>
</tr>
<tr> <td class="col1"> 预计出差时间</td><td colspan="3"class="col5"></td>
</tr>
<tr> <td class="col1"> 出差教师</td><td colspan="3"class="col5"></td>
</tr>
<tr> <td class="col1">出差学生 </td><td colspan="3"class="col5"></td>
</tr>
<tr> <td class="col1">附件 </td><td colspan="3"class="col5"></td>
</tr>
<tr> <td colspan="4" class="col6">提交 重置</td>
</tr>
</table>
</form>
</div>
css:
#apply{
width:100%;
}
table,td{
border:1px black solid;
border-collapse:collapse;
}
td{
height:30px;
}
.col1{
}
.col2{
width:30%;
}
.col5{
width:80%;
}
.col6{
text-align:center;
}
第二步，在表格中添加表单元素
向表格中添加表单元素
<div class="layer2">
<form method="post">
<table id="apply">
<caption>出差申请单</caption>
<tr></tr>
<tr>
<td class="col1 name">申请人：</td>
<td class="col2">
<input type="text" name="uname" class="data"/>
</td>
<td class="col3 name">所在部门：</td>
<td class="col4">
<input type="text" name="setion" class="data"/>
</td>
</tr>
<tr> <td class="col1 name">交通方式：</td>
<td class="col2">
<select>
<option value="car">汽车</option>
<option value="train">火车</option>
<option value="plane">飞机</option>
<option value="car hire">租车</option>
</select>
</td>
<td class="col3 name">申请日期：</td><td class="col4"> <input type="date" name="user_date" class="data"/></td>
</tr>
<tr>
<td class="col1 name"> 出差事由</td><td colspan="3"class="col5"><textarea></textarea></td>
</tr>
<tr>
<td class="col1 name"> 预计出差时间</td>
<td colspan="3"class="col5">
<input type="date" name="start_date" class="data2"/>
至 <input type="date" name="start_date" class="data2"/> 共 n 天
</td>
</tr>
<tr> <td class="col1 name"> 出差教师</td><td colspan="3"class="col5"><input type="text" name="teacher" class="data"/></br>新增</td>
</tr>
<tr> <td class="col1 name">出差学生 </td><td colspan="3" class="col5"><input type="text" name="student" class="data"/>
</td>
</tr>
<tr>
<td class="col1 name">附件 </td>
<td colspan="3"class="col5">
<input type="file" name="items" accept="image/gif" />
</br>新增
</td>
</tr>
<tr> <td colspan="4" class="col6">
<input type="submit" value="提交" class="bn" />
<input type="reset" value="重置" class="bn" />
</td>
</tr>
</table>
</form>
</div>
第三步，修饰与美化
添加CSS样式，使得表单更加美观、好看
#apply{
width:100%;
}
table,td{
border:1px #0071c0 solid;
border-collapse:collapse;
}
td{
height:30px;
}
.col1{
}
.col2{
width:30%;
}
.col5{
width:80%;
}
.col6{
text-align:center;
}
/*输入框*/
.data{
width:95%;height:95%;font-size:100%;
}
textarea{
width:99%; height:70px;font-size:100%;
}
select,option{
width:100%;height:95%;font-size:100%;
}
.data2{
width:45%;height:95%;font-size:100%;
}
caption{
font:normal bold 150% "黑体";
}
.name{
background:#f3f3f3;
}
.bn{
height:40px; margin:0 5px; padding:5px 20px;
font-size:100%;background:#409eff;color:white;
}
放置在网页中
结果图：
以下是基础源代码：
<!DOCTYPE html>
<html >
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style type="text/css">
*{margin:0;padding:0;}
#header{width:100%; height:auto; text-align:center;position: fixed;left:0;}
#layer1-1 h2{letter-spacing:4px;}
#layer1-1{width:45%; height:80px; background:white;text-align:center;line-height:350%;float:left;}
#layer1-1 img{height:80px;}
#layer1-2{width:55%; height:80px;background:#00203f;;color:#FFFFFF;text-align:center;float:left;}
#layer1-2 h3{line-height:350%;}
.clear {clear:both;}
#main{width:100%; height:600px;color:black;}
#navigation2 {
width:17%;
height:600px;
background-color:#001529;
font:normal 100%/4.6em "宋体";
/*text-align:center; /* 这个属性使盒子中的链接居中 */
float:left;
position: fixed;
left:0;
top:80px;
}
#navigation2 a{
color:#FFFFFF;/*字体颜色*/
text-decoration: none;
width:100%;
height:4.5em;
line-height: 4.6em;
box-sizing: border-box;
border:0.05em solid black;
border-left:1em solid #151571;
display:block;
}
#navigation2 a:hover{ /* 鼠标经过时 */
background-color:yellow; /* 改变背景色 */
color:black; /* 改变文字颜色 */
border-left:1em solid orange;
}
#content {
width:83%;
height:600px;
box-sizing:border-box;
padding:0 ;
font:normal 100% "宋体";
line-height: 180%;
float:right;
background:blue;
}
#content img {
float:left;
}
#content h2{
text-align: center;
}
</style>
</head>
<body>
<div id="header">
<div id="layer1-1"><h2>山东商业职业技术学院</h2></div>
<div id="layer1-2"><h3>学校概况 机构设置 教育教学 就业创业 科技服务</h3>
<div class="clear"></div>
</div>
<div id="main">
<div id="navigation2">
<a href="#">首页</a>
<a href="#">实习指导</a>
<a href="#">就业指导</a>
<a href="#">学生周报</a>
<a href="#">老师月报</a>
</div>
<div id="content">
</div>
<div class="clear">
</div>
</div>
<div id="footer">
<p>学校地址：济南市旅游路4516号 邮编：250103</p>
<p>电话：0531-86335888 招生电话：0531-86335555</p>
<p>鲁ICP备05002370 </p>
</div>
</body>
</html>
返回 网页设计与开发
