先来看看效果图：
源码：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<style>
* {
margin: 0;
padding: 0;
/* border: 2px solid #000; */
}
.con {
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: "黑体", sans-serif;
/* 使用黑体字体，如果系统没有黑体则使用无衬线字体 */
color: brown;
/* 设置字体颜色为棕色 */
font-size: 28px;
/* 设置字体大小为28像素 */
text-align: center;
/* 设置文本居中 */
}
table {
font-family: '黑体', sans-serif;
/* 设置字体为黑体，如果系统没有黑体，将使用sans-serif作为备选 */
font-weight: 700;
/* 设置字体粗细为700 */
color: blue;
/* 设置字体颜色为蓝色 */
font-size: 20px;
/* 设置字体大小为20px */
line-height: 55px;
/* 设置行高为55px */
}
</style>
</head>
<body>
<div class="con">
<div class="top">
<img height=150"" src="./img/9-logo.jpg" alt="" />
</div>
<div class="main">
<div class="left">
<p><img src="./img/but2.jpg" alt=""></p>
<p><img src="./img/but3.jpg" alt=""></p>
<p><img src="./img/but4.jpg" alt=""></p>
<p><img src="./img/but5.jpg" alt=""></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 style="margin: 0 auto; width: 400px; border-collapse: collapse;">
<tr>
<td style="text-align: right; width: 158px;">姓名: <label for="textfeld"></label></td>
<td width="242"><input type="text" name="textfield" id="textfield" /></td>
</tr>
<tr>
<td style="text-align: right; ">联系电话: </td>
<td><input type="text" name="textfield2" id="textfield2" /></td>
</tr>
<tr>
<td style="text-align: right; ">邮箱: </td>
<td><input type="text" name="textfield3" id="textfield3" /></td>
</tr>
<tr>
<td style="text-align: right; ">资料邮寄地址: </td>
<td><input type="text" name="textfield4" id="textfield4" /></td>
</tr>
<tr>
<td style="text-align: right;">
最高学历：
</td>
<td>
<select name="select2" id="select2">
<option value="">大学本科</option>
<option value="">大专</option>
<option value="">高中</option>
<option value="">初中</option>
<option value="">小学</option>
</select>
</td>
</tr>
<tr>
<td style="text-align: right;">
选择的课程：
</td>
<td>
<input type="text" name="textfield6" id="textfield6" />
</td>
</tr>
<tr>
<td style="text-align: right; width: 170px;">意向的学习方式：
<label for="select2"></label>
</td>
<td>
<select name="select2" id="select2">
<option value="">网络授课</option>
<option value="">周末班</option>
<option value="">全日制</option>
</select>
</td>
</tr>
<tr>
<td colspan="2" align="center">
<input type="image" src="./img/but1.jpg" alt="" name="imageField" id="imageField" />
</td>
</tr>
</table>
</form>
</div>
<div class="right">
<img src="./img/pho1.jpg" alt="">
<img src="./img/pho2.jpg" alt="">
<img src="./img/pho3.jpg" alt=""><img src="./img/pho4.jpg" alt="">
</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>将近200行的代码，才能写出这样的一个漂亮的网站，但是大家只要好好学，也能写出来；。
