新用户注册界面

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>用户注册</title>
<style>
body,ul,li,h1,h2,h3,form,div,p,span {padding:0;margin:0;}
ul,li {list-style:none;}
html {font-size:62.5%;}
body {font:1.4rem/1.5 'Microsoft Yahei',Simsun,Arail;}
h1,h2,h3 {font-weight:normal}
h1 {font-size:18px;color:#000}
h2 {font-size:16px;color:#333;}
h3 {font-size:14px;color:#666;}
.clear {clear:both;}

/*通用*/
.fullscreen {background:#722dbb url("images/bg.jpg") no-repeat 50% 0;height:503px;border-top:50px solid #000;padding:50px 0;}
.wrap {width:1200px;margin:30px auto;}

/*登陆框*/
.loginform {width:350px;float:right;background:#fff;border:1px solid #eee;border-radius:5px;box-shadow:5px 5px 5px #6813c2;padding:30px;}
.loginform h1 {padding-bottom:10px;}
.loginform ul li {margin:15px 0;}
.loginform ul li span {width:80px;padding-right:10px;text-align:right;color:#666;display:inline-block;}
.loginform .inputstyle,.loginform .x-input{padding:5px 10px;line-height:22px;border:1px solid #ddd;color:#333;}
.loginform .inputstyle:focus,.loginform .x-input:focus {box-shadow:inset 3px 3px 3px #f2f2f2;}
.loginform input.user {width:180px;}
.loginform input.email {width:230px;}

.loginform .btn-reg {width:150px;height:40px;background-color:#c2284d;border:none;color:#fff;border-radius:3px;padding:0;cursor:pointer;}
.loginform .btn-reg:hover {background:#db3b62;}
</style>
</head>
<body>

<div class="fullscreen">
<div class="wrap clearfix">
<div class="loginform">
<h1>新用户注册</h1>
<form action="login.php" method="post">
<ul>
<li><span>用户名:</span><input type="text" name="username" placeholder="请输入用户名" class="inputstyle user"/></li>
<li><span>电子邮箱:</span><input type="text" name="email" placeholder="请输入邮箱" class="inputstyle email" /></li>
<li><span>性别:</span><input type="radio" name="sex" value='1' checked />先生&nbsp;<input type="radio" name="sex" value='2' />女士</li>
<li><span>密码:</span><input type="password" name="passwd" placeholder="请输入密码" class="x-input" /></li>
<li><span>确认密码:</span><input type="password" name="passwd" placeholder="请再次输入密码" class="x-input" /></li>
<li><span></span><input type="submit" value="立即注册" class="btn btn-reg"/></li>
</ul>
</form>
</div>
<div class="clear"></div>
</div>
</div>
</body>
</html>

posted @ 2016-11-26 22:35  zcbing  阅读(508)  评论(0编辑  收藏  举报