【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行的代码,才能写出这样的一个漂亮的网站,但是大家只要好好学,也能写出来;。

相关推荐
小旋风012341 分钟前
封装可拖动弹窗(vue jquery引入到html的版本)
vue.js·html·jquery
热爱编程的小曾23 分钟前
sqli-labs靶场 less 8
前端·数据库·less
gongzemin34 分钟前
React 和 Vue3 在事件传递的区别
前端·vue.js·react.js
Apifox1 小时前
如何在 Apifox 中通过 Runner 运行包含云端数据库连接配置的测试场景
前端·后端·ci/cd
-代号95271 小时前
【JavaScript】十四、轮播图
javascript·css·css3
树上有只程序猿1 小时前
后端思维之高并发处理方案
前端
庸俗今天不摸鱼2 小时前
【万字总结】前端全方位性能优化指南(十)——自适应优化系统、遗传算法调参、Service Worker智能降级方案
前端·性能优化·webassembly
黄毛火烧雪下2 小时前
React Context API 用于在组件树中共享全局状态
前端·javascript·react.js
Apifox2 小时前
如何在 Apifox 中通过 CLI 运行包含云端数据库连接配置的测试场景
前端·后端·程序员
一张假钞2 小时前
Firefox默认在新标签页打开收藏栏链接
前端·firefox