【html】如何用html+css写出一个漂亮的“众成教育”页面

先来看看效果图:

源码:

java 复制代码
<!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>
				此网站信息最终解释权&copy;众成远程教育
			</div>

		</div>
	</body>
</html>

将近200行的代码,才能写出这样的一个漂亮的网站,但是大家只要好好学,也能写出来;。

相关推荐
_丿丨丨_5 小时前
XSS(跨站脚本攻击)
前端·网络·xss
天天进步20155 小时前
前端安全指南:防御XSS与CSRF攻击
前端·安全·xss
拾光拾趣录7 小时前
括号生成算法
前端·算法
拾光拾趣录8 小时前
requestIdleCallback:让你的网页如丝般顺滑
前端·性能优化
前端 贾公子8 小时前
vue-cli 模式下安装 uni-ui
前端·javascript·windows
拾光拾趣录8 小时前
链表合并:双指针与递归
前端·javascript·算法
@大迁世界8 小时前
前端:优秀架构的坟墓
前端·架构
期待のcode9 小时前
图片上传实现
java·前端·javascript·数据库·servlet·交互
hbrown9 小时前
Flask+LayUI开发手记(十一):选项集合的数据库扩展类
前端·数据库·python·layui
猫头虎10 小时前
什么是 npm、Yarn、pnpm? 有什么区别? 分别适应什么场景?
前端·python·scrapy·arcgis·npm·beautifulsoup·pip