第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>
此网站信息最终解释权©众诚远程教育
</div>
</div>
</body>
</html>运行结果如下：
原文地址：https://blog.csdn.net/2301_82347006/article/details/143806260
免责声明：本站文章内容转载自网络资源，如本站内容侵犯了原著者的合法权益，可联系本站删除。更多内容请关注自学内容网（zxcms.com）！