黑客登录界面科幻黑色主题网页模板表单验证代码

黑客登录界面科幻黑色主题网页模板表单验证代码

效果：

html代码：

<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="UTF-8">
		<title>Index</title>
		<style type="text/css">
			label {
   
   
				cursor: pointer;
				color: white;
			}

			* {
   
   
				margin: 0;
				padding: 0;
				box-sizing: border-box;
			}

			#Total {
   
   
				box-shadow: 2px 2px 10px 1px #00fffd;
				background: black;
				opacity: 0.9;
				width: 40%;
				min-height: 800px;
				margin: 0 auto;
				border-radius: 10px;
				overflow: hidden;
				border-left: 0.5px solid #00fffd;
				border-right: 0.5px solid #00fffd;
				border-bottom: 0.5px solid #00fffd;
			}

			#Total #Title {
   
   
				background: #00fffd;
				color: white;
				width: 100%;
				letter-spacing: 5px;
				height: 50px;
				line-height: 50px;
				text-align: center;
				font-size: 20px;
				font-weight: bold;
			}

			#Total .item,
			#Total .item_ {
   
   
				width: 90%;
				margin: 10px auto;
				height: 25px;
				line-height: 25px;
				font-size: 18px;
				font-weight: bold;
				position: relative;
			}

			#Total .item.item,
			#Total .item_.item {
   
   
				margin-top: 20px;
			}

			#Total .item .important,
			#Total .item_ .important {
   
   
				color: #6385d1;
			}

			#Total .item input,
			#Total .item_ input {
   
   
				position: absolute;
				width: 60%;
				height: 40px;
				top: 50%;
				left: 20%;
				margin-top: -20px;
				font-size: 15px;
				outline: none;
				border: 1px solid rgba(0, 0, 0, 0.2);
				border-radius: 5px;
				transition: box-shadow .5s