第9章综合案例————众成远程教育

制作"众成远程教育"网页，本章项目页面布局要求如下:页面要求有最外层的 div-al，第二层嵌套上中下3行区域，分别为div-top.div-main和 div-footer。而 div-main 又第三层嵌套左中右三列区域，分别为 div-let、div-cene和div-right。

代码如下：

​<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>众成远程教育</title>
		<style>
			*{
				margin: 0px auto;
			}
			.all{
				width: 1000px;
				height: 840px;
				background-image: url(img/9-bg.jpg);
			}
			.top{
				width: 1000px;
				height: 150px;
			}
			.main{
				background-color: aliceblue;
				width: 1000px;
				height: 630px;
			}
			.left{
				padding-top: 30px;
				padding-left: 20px;
				width: 200px;
				height: 570px;
				float: left;
				line-height: 60px;
			}
			.center{
				border-left: 2px dashed blue;
				border-right: 2px dashed blue;
				padding-top: 50px;
				width: 500px;
				height: 580px;
				float: left;
			}
			.right{
				padding-left: 20px;
				width: 250px;
				height: 630px;
				float: left;
			}
			.footer{
				width: 1000px;
				height: 60px;
				font-family: "楷体";
				font-size: 18px;
				text-align: center;
				line-height: 30px;
			}
			a,span{
				color: red;
				font-weight: 700;
				text-align: center;
			}
			p{
				font-family: "黑体";
				font-family: 700px;
				color: brown;
				font-size: 28px;
				text-align: center;
			}
			table{
				font-family: "黑体";
				font-weight: 700px;
				color: blue;
				font-size: 20px;
				line-height: 55px;
			}
		</style>
	</head>
	<body>
	<div class="all">
		<div class="top">
			<img src="img/9-logo.jpg" width="708px" height="150px"/>
		</div>
		<div class="main">
			<div class="left">
				<p><img src="img/but2.jpg"/></p>
				<p><img src="img/but3.jpg"/></p>
				<p><img src="img/but4.jpg"/></p>
				<p><img src="img/but5.jpg"/></p>
				<p>相关信息</p>
				<a href="#">4 大学历提升方案</a>
				<br>
				<a href="#">新报考政策解读击</a>
				<br>
				<a href="#">6 大类专业报考指南</a>
				<br>
				<a href="#">更多信息请点击</a>
			</div>
			<div class="center">
				<p>入学报名表</p>
				<form id="form2" name="form2" method="post" action=" ">
					<table width="400" border="0" align="center" cellpadding="0" cellspacing="0">
						<tr>
							<td width="158" align="right">姓名:<label for="textfield"></label></td>
							<td width="242"><input type="text" name="textfield" id="textfield"/></td>
						</tr>
						<tr>
							<td align="right">联系电话:</td>
							<td><input type="text" name="textfield2" id="textfield2"/></td>
						</tr>
						<tr>
							<td align="right">邮箱:</td>
							<td><input type="text" name="textfield3" id="textfield3"/></td>
						</tr>
						<tr>
							<td align="right">资料邮寄地址:</td>
							<td><input type="text" name="textfield4" id="textfield4"/></td>
						</tr>
						<tr>
							<td align="right">最高学历:</td>
							<td>
								<select name="select2" id="select2">
									<option>大学本科</option>
									<option>专科</option>
									<option>高中</option>
									<option>初中</option>
									<option>小学</option>
								</select>
							</td>
						</tr>
						<tr>
							<td align="right">选择的课程:</td>
							<td><input type="text" name="textfield6" id="textfield6"/></td>
						</tr>
						<tr>
							<td align="right">意向学习方式:
								<label for="select2"></label>
							</td>
							<td>
								<select name="select" id="select">
										<option>网络授课</option>
										<option>周末班</option>
										<option>全日制</option>
								</select>
							</td>
						</tr>
						<tr>
							<td colspan="2" align="center">
								<input type="image" name="imageFied" id="imageFied" src="img/but1.jpg"/>
							</td>
						</tr>
					</table>
				</form>
			</div>
			<div class="right">
				<img src="img/pho1.jpg"/>
				<img src="img/pho2.jpg"/>
				<img src="img/pho3.jpg"/>
				<img src="img/pho4.jpg"/>
			</div>
		</div>
		<div class="footer">
			<span>免费电话:</span>400-XXX-XXX(18条线)||
			<span>(北京校区)</span>北京路XX大厦一楼0000号;||
			<span>(上海校区)</span>上海路XX科技园7栋9999号<br>
			此网站信息最终解释权&copy;众诚远程教育
		</div>
	</div>
	</body>
</html>

运行结果如下：