千年之恋网页

最新推荐文章于 2024-09-13 23:28:46 发布
WYFBYM
最新推荐文章于 2024-09-13 23:28:46 发布
阅读量356
点赞数 9
文章标签： css html
本文链接：https://blog.csdn.net/WYFBYM/article/details/135299495
版权
<!doctype html>
<html>
<head>
	<meta charset="utf-8">
	<title>千年之恋</title>
	<style type="text/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;
		}
		#header {
			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;
		}
		#banner {
			width: 980px;
			margin: 0 auto;
		}
		#content {
			width: 930px;
			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: #aaa;
		}
		textarea {
			width: 380px;
			border: 1px solid #dd8787;
			resize: none;
			font: 12px;
			color: #aaa;
			padding: 20px;
		}
		.btn {
			width: 409px;
			height: 76px;
			background: url(img/btn.jpg) right center no-repeat;
		}
 
		#footer {
			width: 100%;
			height: 68px;
			line-height: 26px;
			background: #de668f;
			color: #fff;
			text-align: center;
			padding-top: 40px;
		}
	</style>
</head>
<body>
	<div id="header">
		<img src="img/logo.jpg" />
	</div>
	<div id="nav_bg">
		<ul class="nav">
			<li><a href="#">首页</a></li>
			<li><a href="#">会员</a></li>
			<li><a href="#">活动</a></li>
			<li><a href="#">直播</a></li>
			<li><a href="#">视频</a></li>
			<li><a href="#">注册</a></li>
		</ul>
	</div>
	<div id="banner">
		<img src="img/banner.jpg" />
	</div>
	<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="sex"
								id="one" />E-mail注册</label>&nbsp;&nbsp;&nbsp;&nbsp;
						<label for="two"><input type="radio" name="sex" 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="sex" id="boy" />男</label>&nbsp;&nbsp;&nbsp;&nbsp;
						<label for="girl"><input type="radio" name="sex" 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>
						</select>
					</td>
				</tr>
				<tr>
					<td class="left">
						兴趣爱好：
					</td>
					<td>
						<input type="checkbox" />足球&nbsp;&nbsp;&nbsp;
						<input type="checkbox" />篮球&nbsp;&nbsp;&nbsp;
						<input type="checkbox" />游泳&nbsp;&nbsp;&nbsp;
						<input type="checkbox" />唱歌&nbsp;&nbsp;&nbsp;
						<input type="checkbox" />跑步&nbsp;&nbsp;&nbsp;
						<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>
	<div id="footer">
		<p>Copyright 20
			06-2016 QIANNIANZHILIANcom, ALL rights reserved.<br />2001-2018,版权所有 千年之恋 85cp 备 13385453</p >
	</div>
</body>
</html>