【Web前端】千年之恋注册页面——源代码展示

原创

已于 2022-12-01 16:34:05 修改 · 2.2w 阅读

227

于 2022-06-25 22:46:38 首次发布

该文章已生成可运行项目，

本篇文章我们来实现一个千年之恋的登录注册页面(仅使用了HTML+CSS)，这个案例充分使用到了表单标签，这对于刚学习表单标签的朋友练习难度刚刚好，接下来我们来看看如何实现这个页面的效果吧。

这里是网页页面+图片素材，需要的自取噢：

链接：https://pan.baidu.com/s/1TXBQ8XchgpuMUn7GtXSznw?pwd=7777
提取码：7777

一、案例图

二、源代码

2.1 html部分

<body>
	<div id="header">
		<img src="images/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="#" class="bg">注册</a></li>
		</ul>
	</div>
	<div id="banner">
		<img src="images/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>博士研究生

本文章已经生成可运行项目