本文主要是介绍【html】如何用html+css写出一个漂亮的“众成教育”页面，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！
先来看看效果图：
源码：
<!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行的代码，才能写出这样的一个漂亮的网站，但是大家只要好好学，也能写出来；。
这篇关于【html】如何用html+css写出一个漂亮的“众成教育”页面的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！
