HTML5前端开发实战06-幸福表单

最新推荐文章于 2024-07-23 17:35:03 发布

谷哥的小弟

最新推荐文章于 2024-07-23 17:35:03 发布

阅读量2.5k

点赞数 15

分类专栏： HTML5前端开发实战文章标签： HTML CSS JavaScript 源码

本文链接：https://blog.csdn.net/lfdfhl/article/details/100124709

版权

HTML5前端开发实战专栏收录该内容

8 篇文章 86 订阅

订阅专栏

推翻自己和过往——自定义View系列教程(10篇)

走出思维困境，踏上精进之路——Android开发进阶精华录

讲给Android程序员看的前端系列教程(40集免费视频教程+源码)

版权声明

本文原创作者：谷哥的小弟
作者博客地址：http://blog.csdn.net/lfdfhl

页面效果

在这里插入图片描述

页面源码

HMTL源码

<html xmlns="http://www.w3.org/1999/xhtml">
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
		<title>幸福表单</title>
		<link href="css/style.css" type="text/css" rel="stylesheet" />
	</head>
	<body>
		<!-- 头部模块 begin-->
		<div id="banner">
			<img src="img/banner.jpg" />
		</div>
		<!-- 头部模块 end-->
		
		<!-- 内容模块 begin-->
		<div id="content">
			<h2 class="step">注册步骤：</h2>
			<form action="#" method="post" class="one">
				<h3>注册资料</h3>
				<table class="content">
					<tr>
						<td class="left">注册方式：</td>
						<td>
							<label for="one"><input type="radio" name="regtype" id="one" />E-mail注册</label>
							<label for="two"><input type="radio" name="regtype" id="two" />手机号码注册</label>
						</td>
					</tr>
					<tr>
						<td class="left">邮箱地址：</td>
						<td><input type="text" class="right" /></td>
					</tr>
					<tr>
						<td class="left">手机号码：</td>
						<td><input type="text" class="right" /></td>
					</tr>
					<tr>
						<td class="left">登陆密码：</td>
						<td><input type="password" maxlength="8" class="right" /></td>
					</tr>
					<tr>
						<td class="left">甜蜜昵称：</td>
						<td><input type="text" class="right" /></td>
					</tr>
				</table>
				<h3>个人信息</h3>
				<table class="content">
					<tr>
						<td class="left">您的性别：</td>
						<td>
							<label for="boy"><input type="radio" name="gender" id="boy" />男</label>
							<label for="girl"><input type="radio" name="gender" id="girl" />女</label>
						</td>
					</tr>
					<tr>
						<td class="left">最终学历：</td>
						<td>
							<select>
								<option>-请选择-</option>
								<option>中职/高中</option>
								<option>专科/本科</option>
								<option>硕士研究生</option>
								<option>博士研究生</option>
							</select>
						</td>
					</tr>
					<tr>
						<td class="left">所在城市：</td>
						<td>
							<select>
								<option>-请选择-</option>
								<option selected="selected">北京</option>
								<option>上海</option>
								<option>广州</option>
								<option>成都</option>
								<option>铁岭</option>
							</select>
						</td>
					</tr>
					<tr>
						<td class="left">兴趣爱好：</td>
						<td>
							<input type="checkbox" />足球
							<input type="checkbox" />篮球
							<input type="checkbox" />游泳
							<input type="checkbox" />唱歌
							<input type="checkbox" />跑步
							<input type="checkbox" />瑜伽
						</td>
					</tr>
					<tr>
						<td class="left">自我介绍：</td>
						<td>
							<textarea cols="60" rows="8">请在此处写下您的个人介绍</textarea>
						</td>
					</tr>
					<tr>
						<td colspan="2"><input type="button" class="btn" /></td>
					</tr>
				</table>
			</form>
		</div>
		<!-- 内容模块 end-->
	</body>
</html>

CSS源码

* {
	margin: 0;
	padding: 0;
	list-style: none;
	outline: none;
	border: 0;
	background: none;
}

body {
	font-family: "微软雅黑";
	font-size: 14px;
}

a:link,
a:visited {
	text-decoration: none;
	color: #fff;
	font-size: 16px;
}

#head {
	width: 980px;
	height: 70px;
	margin: 0 auto;
	padding-top: 20px;
}

#nav_bg {
	width: 100%;
	height: 48px;
	background: #fe668f;
}

.nav {
	width: 980px;
	margin: 0 auto;
}

.nav li {
	float: left;
}

a {
	display: inline-block;
	height: 48px;
	padding: 0 50px;
	line-height: 48px;
}

.bg {
	background: #fe9ab5;
}

a:hover {
	background: #fe9ab5;
}

#banner {
	width: 980px;
	margin: 0 auto;
}

#content {
	width: 830px;
	height: 934px;
	background: url(../img/content_bg.jpg) no-repeat;
	margin: 0 auto;
	padding-left: 150px;
}

.step {
	width: 454px;
	height: 80px;
	font-size: 20px;
	font-weight: 100;
	color: #dd8787;
	background: url(../img/step.jpg) center right no-repeat;
	line-height: 80px;
}

h3 {
	width: 444px;
	height: 45px;
	font-size: 20px;
	font-weight: 100;
	color: #dd8787;
	line-height: 45px;
	border-bottom: 1px solid #dd8787;
}

td {
	height: 50px;
	color: #dd8787;
}

.left {
	width: 120px;
	text-align: right;
}

.right {
	width: 320px;
	height: 28px;
	border: 1px solid #dd8787;
}

input {
	vertical-align: middle;
}

select {
	width: 171px;
	border: 1px solid #dd8787;
	color: #dd8787;
}

textarea {
	width: 380px;
	border: 1px solid #dd8787;
	resize: none;
	font-size: 12px;
	color: #aaa;
	padding: 20px;
}

.btn {
	width: 408px;
	height: 76px;
	background: url(../img/register.jpg) right center no-repeat;
}

#footer {
	width: 100%;
	height: 68px;
	line-height: 26px;
	background: #fe668f;
	color: #fff;
	text-align: center;
	padding-top: 40px;
}