HTML5学习笔记1

最新推荐文章于 2023-02-04 20:54:59 发布

Solo_two

最新推荐文章于 2023-02-04 20:54:59 发布

阅读量547

点赞数

分类专栏： HTML5 学习笔记文章标签： html5

本文链接：https://blog.csdn.net/Solo_two/article/details/51438212

版权

HTML5 学习笔记专栏收录该内容

13 篇文章 0 订阅

订阅专栏

一、静态登录界面

代码如下:

<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			div {
				background-color: lightskyblue;
			}
			
			#mid {
				vertical-align: middle;
			}
		</style>

	</head>

	<body>

		<div style="padding-left: 10px;" align="center">

			<form>
				<table>
					<tr>
						<td>
							<h2 style="padding-bottom: 50px;">注册</h2></td>
					</tr>

					<tr>
						<td style="text-align: right;padding-right:10px ;">真实姓名</td>
						<td><input type="text" οnfοcus="JavaScript:this.value=''" οnblur="JavaScript:this.value='111'" placeholder="姓名(必填)" style="width: 300px;height: 30px;" /></td>
					</tr>

					<tr>
						<td style="text-align: right;padding-right:10px ;">手机号/邮箱</td>
						<td style="padding-top: 10px;padding-bottom: 10px;"><input type="text" placeholder="请输入常用邮箱或手机号" style="width: 300px;height: 30px;" />
						</td>
					</tr>

					<tr>
						<td style="text-align: right;padding-right:10px ;">密码</td>
						<td><input type="text" placeholder="6-20位的字母、数字和下划线" style="width: 300px;height: 30px;" /></td>
					</tr>

					<tr>
						<td></td>
						<td style="padding-top: 10px;"> <input type="checkbox" name="box" value="" checked="" /> 我接受智联招聘的
							<a href="">用户协议</a>和<a href="">隐私政策</a>
						</td>
					</tr>

					<tr>
						<td></td>
						<td style="padding-top: 20px;padding-bottom: 10px;"><input type="button" value="立即注册" style="width: 300px;height: 
						auto;background-color:lawngreen;
						font-size: 25px;color: #FFF;
						" />
						</td>
					</tr>

					<tr>
						<td></td>
						<td style="font-size: 12px;">已有账号，<a href="#" target="_blank" style="color:green;text-decoration: none;">直接登录</a></td>
					</tr>

					<tr>
						<td></td>

						<td style="font-size: 13px;">
							<hr style="border-top:1px dashed #00F;
							 height:1px;color: rgba(0,0,0,0.05);
							 padding-bottom: 5px;
							 " />使用其他方式登录：

							<a href="" title="QQ"><img src="img/123.png" id="mid" /></a>
							<a href="" title="人人"><img src="img/123.png" id="mid" /></a>
							<a href="" title="新浪"><img src="img/123.png" id="mid" /></a>
							<a href="" title="豆瓣"><img src="img/123.png"  id="mid""/></a>

						</td>

					</tr>
				</table>
			</form>
		</div>
	</body>

</html>