老王前端HTML课后练习第12课—表单注册登录界面

html写的简易表单注册界面，先来看界面截图：

表单在整个网页设计中都会碰到，比如注册界面，会有一些提示的样子，具体的内容可以参考12课表单和元素

来看代码部分，主要是body内容：

	<ul>
		<li>
			<span>用户名:</span>
			<input type="text" placeholder="请输入英文字母或者汉字" />
			<p class="p1">用户名必须为数字+字母,至少8位以上!
				<i class="bk"></i>
			</p>
		</li>
		<li>
			<span>密码:</span>
			<input type="password" placeholder="1234567**" />
			<p class="p2">请不要输入电话或者生日作为密码!
				<i class="bk"></i>
			</p>
		</li>
		<li>
			<span>确认密码:</span>
			<input type="password" placeholder="1234567**" />
			<p class="p3">请再次输入你的密码确认!
				<i class="bk"></i>
			</p>
		</li>
		<li>
			<span>email:</span>
			<input type="text" placeholder="362647423@qq.com" />
			<p class="p4">电子邮件作为后期找回密码的重要依据
				<i class="bk"></i>
			</p>
		</li>
		<li>
			<span>昵称:</span>
			<input type="text" placeholder="小熊" />
			<p class="p5">请输入一个昵称作为你的网名
				<i class="bk"></i>
			</p>
		</li>

		<li>
			
			<a>我有账户,我要登录</a>
			<a style="width:80px">注册</a>
		
		</li>
	</ul>

目前是把整个界面写死的，在整个内容的部分中。每一段都有对应的文字提示，在鼠标放上去后在把对应位置的内容进行显示

			a{text-decoration:none;}
			img{border:none;}
			ul{
				width:440px;
				height:480px;
				padding:20px;
				margin:60px auto;
				border-radius:6px;
				border:1px solid #aaa;
			}
			li{
				position:relative;
				width:400px;
				height:60px;
				margin:20px;
				
			}
			p{
				display:none;
				height:30px;
				text-indent:5px;
				line-height:30px;
				font-size:14px;
				color:#fff;
				padding:8px;
				border-radius:6px;
				background:#1e84bb;
			}
			.bk{
				position:absolute;
				top:9px;
				left:-30px;
				width:0px;
				height:0px;
				border-top:15px solid transparent;
				border-left:15px solid transparent;
				border-bottom:15px solid transparent;
				border-right:15px solid #1e84bb;
			}

			.p1{
				position:absolute;
				right:-250px;
				top:0px;
			}
			.p2{
				position:absolute;
				right:-228px;
				top:0px;
			}
			.p3{
				position:absolute;
				right:-172px;
				top:0px;
			}
			.p4{
				position:absolute;
				right:-252px;
				top:0px;
			}
			.p5{
				position:absolute;
				right:-196px;
				top:0px;
			}

		
			
			li:hover p{
				display:block;
			}
			input:focus{
				border:2px solid #55bcee;
			}	
			span{
				display:inline-block;
				width:70px;
				height:60px;
				text-align:right;
				font-size:16px;
			}
			input{
				text-indent:15px;
				width:320px;
				height:60px;
				border:1px solid #aaa;
				border-radius:6px;

			}
			a{
				display:inline-block;
				height:40px;
				line-height:40px;
				font-size:16px;
				float:right;
				text-align:center;
				background:#1e84bb;
				border-radius:5px;
				margin-right:20px;
				padding:0px 10px;
			}

最开始吧文字部分display：none;不显示，然后hover的时候在改成display:block;输入框的修饰部分就加了一个border-radius圆角修饰。属于比较接单的表单界面