【网页制作】注册表单页

最新推荐文章于 2024-07-31 21:27:15 发布

原创

最新推荐文章于 2024-07-31 21:27:15 发布 · 1.3k 阅读

9 ·

CC 4.0 BY-SA版权

文章标签：

#css #html

🌈据说，看我文章时 关注、点赞、收藏 的 帅哥美女们 心情都会不自觉的好起来。

前言：
🧡作者简介：大家好我是 user_from_future ，意思是 “ 来自未来的用户 ” ，寓意着未来的自己一定很棒~
✨个人主页：点我直达，在这里肯定能找到你想要的~
👍专栏介绍：Html+Css+JS / jQuery小型网页综合实战，一个专注于分享网页制作实例的专栏~

专栏文章直链：
【网页制作】jQuery操作css实现设置箭头图片

人生苦短，我用python

制作要求

合理使用css布局完成页面的制作。

制作效果图

在这里插入图片描述

参考源代码

目录结构

└──网页文件夹
	├── 1.jpg
	├── register0.html
	├── register1.html
	└── register2.html

1.jpg

在这里插入图片描述

register0.html

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
			body {
     
     
				margin: 20px 40px;
			}

			a {
     
     
				text-decoration: none;
			}

			#main {
     
     
				height: 25px;
				width: 640px;
				line-height: 25px;
			}

			#main>span {
     
     
				float: left;
				color: #59AFE4;
				font-size: 20px;
				margin-right: 5px;
			}

			table {
     
     
				line-height: 40px;
				margin-top: 20px;
			}

			table td>div {
     
     
				height: 22px;
				font-size: 14px;
				line-height: 22px;
			}

			table span,
			a {
     
     
				float: left;
				height: 22px;
				color: #59AFE4;
				line-height: 22px;
			}

			table th {
     
     
				width: 90px;
				height: 40px;
				font-size: 15px;
				padding: 0 10px;
				text-align: right;
				line-height: 40px;
				font-weight: normal;
			}

			table td {
     
     
				width: 320px;
				height: 40px;
				text-align: left;
				line-height: 40px;
			}

			table input {
     
     
				width: 300px;
				height: 30px;
				text-align: left;
				line-height: 30px;
				border-radius: 5px;
				font-weight: normal;
				background-color: #FFF;
			}

			table input[type="radio"] {
     
     
				width: 15px;
				height: 15px;
			}

			table select {
     
     
				height: 24px;
				color: #59AFE4;
			}

			table option {
     
     
				height: 24px;
				color: #000;
			}

			table input[type="checkbox"] {
     
     
				width: 15px;
				height: 15px;
			}

			table input[type="button"] {
     
     
				color: #FFF;
				width: 180px;
				height: 60px;
				font-size: 24px;
				font-weight: bold;
				line-height: 60px;
				text-align: center;
				border-radius: 10px;
				border-style: initial;
				background-image: linear-gradient(#a5e486, #59ad42);
			}
		</style>
	</head>
	<body>
		<div id="main">
			<span>|</span>
			<div>注册账号</div>
			<hr color="#DDD" />
		</div>
		<table>
			<tr>
				<th>昵称</th>
				<td><input type="text"></td>
				<td>
					<div>
						请输入昵称<br /><span><a href="#">试试新功能，让手机号变QQ号！</a></span>
					</div>
				</td>
			</tr>
			<tr>
				<th>密码</th>
				<td><input type="password" /></td>
				<td></td>
			</tr>
			<tr>
				<th>确认密码</th>
				<td><input type="password" /></td>
				<td></td>
			</tr>
			<tr>
				<th>性别</th>
				<td>
					<input type="radio" name="sex" value="1" checked="checked" /> 男
					&ensp;&ensp;&ensp;<input type="radio" name="sex" value="0" /> 女
				</td>
				<td></td>
			</tr>
			<tr>
				<th>生日</th>
				<td>
					<select style="width: 60px;">
						<option value="公历">公历</option>
						<option value="农历">农历</option>
					</select>

					<select style="width: 100px;">
						<option value="disabled">年</option>
						<option value="2000">2000</option>
						<option value="2001">2001</option>
						<option value="2002">2002</option>
						<option value="2003">2003</option>
						<option value="2004">2004</option>
						<option value="2005">2005</option>
					</select>
					<select style="width: 60px;">
						<option value="disabled">月</option>
						<option value="1">1</option>
						<option value="2">2</option>
						<option value="3">3</option>
						<option value="4">4</option>
						<option value="5">5</option>
						<option value="6">6</option>
						<option value="7">7</option>
						<option value="8">8</option>
						<option value="9">9</option>
						<option value="10">10</option>
						<option value="11">11</option>
						<option value="12">12</option>
					</select>
					<select style="width: 60px;">
						<option name="" value="disabled">日</option>
						<option value="1">1</option>
						<option value="2">2</option>
						<option value="3">3</option>
						<option value="4">4</option>
						<option value="5">5</option>
						<option value="6">6</option>
						<option value="7">7</option>
						<option value="8">8</option>
						<option value="9">9</option>
						<option value="10">10</option>
						<option value="11">11</option>
						<option value="12">12</option>
						<option value="13">13</option>
						<option value="14">14</option>
						<option value="15">15</option>
						<option value="16">16</option>
						<option value="17">17</option>
						<option value="18">18</option>
						<option value="19">19</option>
						<option value="20">20</option>
						<option value="21">21</option>
						<option value="22">22