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

news2024/11/26 1:56:42

先来看看效果图：

源码：

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

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.coloradmin.cn/o/1795624.html

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈，一经查实，立即删除！