web注册页面html,web-用户注册界面

效果如下

html

用户注册

快速注册

Email:
用户名:
密码:
性别:	男 女
兴趣:	篮球 音乐 绘画
	创建按钮

已有账号？请直接登录

登录

style.css

body,html{

padding: 0;

margin: 0;

}

body{

background: #eee;

display: flex;

flex-direction: row;

justify-content: center;

align-items: center;

height: 100VH;

}

.login-box{

width: 900px;

height: 500px;

border: 1px solid #ddd;

box-shadow: 2px 2px 5px #999;

}

.left,.right{

height: 100%;

float: left;

box-sizing: border-box;

}

.left{

width: 700px;

background: #fff;

border-right: 1px solid #bbb;

padding: 1em;

}

.right{

width: 200px;

}

.left > h1{

font-size: 18px;

margin: 0;

margin-bottom: 1em;

color: #09f;

}

.login-table{

color: #333;

font-size: 12px;

}

.login-table tr td:first-child{

text-align: right;

}/*

.login-table input[type=text],.login-table input[type=password]{

width: 150px;

height: 1.5em;

}*/

.login-table input[placeholder*="请"]{

width: 280px;

height: 1.5em;

border: 1px solid #ddd;

font-size: 12px;

padding: 0.5em;

}

.login-table input[placeholder*="请"]:focus{

outline: 1px solid #09f;

}

.login-table tr td{

height: 3em;

}

.submit{

border: 1px solid #05f;

background: #05f;

color: white;

padding: 0.5em 1em;

box-shadow: 0 0 2px #444;

}

.login-table .submit{

font-size: 12px;

width: 8em;

}

.right{

padding: 1em;

font-size: 12px;

}

.right .submit{

font-size: 12px;

height: 2em;

box-sizing: border-box;

padding: 0.2em 1em;

}