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

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

代码如下:

html 复制代码
​<!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>

运行结果如下:

相关推荐
墨鸦_Cormorant2 分钟前
Vue 概述以及基本使用
前端·javascript·vue.js
JarvanMo15 分钟前
10 个能帮你节省大量开发时间的低估 Flutter 组件
前端
去伪存真18 分钟前
公司前端项目ESLint规则集统一化
前端
鹏多多22 分钟前
使用imaskjs实现js表单输入卡号/日期/货币等掩码的教程
前端·javascript·vue.js
w2vmany23 分钟前
postmessage xss初步学习
前端·学习·xss
小张成长计划..1 小时前
前端6:CSS3 2D转换,CSS3动画,CSS3 3D转换
前端·3d·css3
IT_陈寒1 小时前
Vue3性能优化实战:这7个技巧让我的应用加载速度提升50%!
前端·人工智能·后端
西西学代码1 小时前
Flutter---音效模式选择器
前端·html
TLucas1 小时前
Layui连线题编辑器组件(ConnectQuestion)
前端·编辑器·layui
艾小码2 小时前
告别页面呆板!这5个DOM操作技巧让你的网站活起来
前端·javascript