仿 豆瓣注册页面

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html lang="zh-CH">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>欢迎加入豆瓣</title>
<link rel="shortcut icon" type="image/x-icon" href="../HTML图片/u=517497324,1050730652&fm=26&gp=0.ico" >
<style type="text/css">

.GlobalPhone {
vertical-align: middle;
display: inline-block;
}


.GlobalPhone{
display:table;
padding:0;
height:28px;
210px;
font-size:0;
position:relative;
}

.GlobalPhone>span{
text-align:center;
padding:0 7px;
cursor:pointer;
color:#494949;
white-space:nowrap;
}


.GlobalPhone>span,.GlobalPhone input{
line-height:28px;
}


.GlobalPhone>*{
font-size:14px;
display:table-cell;
vertical-align:top;
}


.GlobalPhone>span:after{
content:"";
display:inline-block;
height:15px;
border-right:1px solid #ccc;
vertical-align:middle;
margin-left:7px;
}


#request-phone-code-btn{
cursor:pointer;
background:#fff;
border:1px solid #c9c9c9;
font-size:13px;
padding:6px 15px;
border-radius:3px;
vertical-align:middle;
-webkit-border-radius:3px;
}

.item {
clear:both;

}


em{
font-style:normal;
}

a:link{
color:#369;
text-decoration:none;
}

.loc {
font-size: 12px;
line-height: 30px;
}


input:focus {
border-color:#000 !important;
outline: 0;
-webkit-box-shadow:inset 0 1px 1px rgba(0,0,0,.075), 0 0 8px rgba(102, 175,233,0.6);
-moz-box-shadow:inset 0 1px 1px rgba(0,0,0,.075), 0 0 8px rgba(102, 175,233,0.6);
box-shadow:inset 0 1px 1px rgba(0,0,0,.075), 0 0 8px rgba(102, 175,233,0.6);
}


.basic-input {
200px;
height:18px;
padding:5px;
border-radius:3px;
border:1px solid #333;
font-size:14px;
background-color:transparent;
}


label {
display:inline-block;
float:left;
margin-right:15px;
text-align:right;
60px;
font-size:14px;
line-height:30px;
vertical-align:middle;
}

.tips, #location{
font-size:12px;
color:#808080;
}
.suggestion {
padding-left:75px;
}


.enable{
color:#ffffff;
background:#3fa156;
border:1px solid #063;
}
.btn-submit{
cursor:pointer;
font-size:14px;
font-weight:bold;
padding:6px 26px;
border-radius:3px;
}

input,button.textarea,select{
font-family:inherit;
font-size:inherit;
font-style:inherit;
font-weight:inherit;
}

</style>
</head>

<body>
<img src="../HTML图片/lg_account.png" />
<br />

<h2>欢迎加入豆瓣</h2>

<div class="item extra-tips">
<label for="Email">邮箱</label>
<input type="text" id="email" placeholder="请输入邮箱" class="basic-input"
maxlength="60" tabindex="1" value/>
</div>


<div >
<label for="Email">密码</label>
<input type="text" id="password" placeholder="请输入密码" class="basic-input"/>
</div>


<div >
<label for="Email">名号</label>
<input type="text" id="name" class="basic-input" />
</div>


<div class="suggestion">
<span class="tips">第一印象很重要,起个响亮的名号吧</span>

</div>


<div class="item loc-item">
<label>常居地</label>
<span class="loc">
<em id="location">
豆瓣猜你在
<strong>成都</strong>
,没猜对?
</em>
<a href="#" class="a-btn-location" id="edloc">手动选择</a>
</span>
</div>



<div class="item extra-tips">
<label for="verify_phone_num">手机号</label>
<div class="basic-input GlobalPhone" >
<span class="js-choose-district" data-abbr="CN">
+86
</span>
<div >
<input id="verify_phone_num" type="text" class="basic-input" maxlength="60" value tabindex="1" />
<input id="verify_phone" name="verify_phone" type="hidden"
value />
</div>`
</div>
</div>

<div class="suggestion">
<span class="tips">
用手机接收注册验证码
<br />

验证的手机号如果没有绑定过账号。会自动绑定当前账号
</span>
</div>

<div class="item-caption-item">
<label>验证码</label>
<input id="code" name="code" type="text" class="basic-input small" maxlength="10" tabindex="2" />
<input id="request-phone-code-btn" type="submit" value="获取验证码" />
<span id="tips-error" class="tips">
<em></em>

</span>
<span id="tips-info" class="tips"></span>
<span class="validate-error" id="frm_error"></span>
</div>



<div class="item-submit">
<label>&nbsp;</label>
<input type="submit" name="register" value="注册" id="button" class="btn-submit enable" tabindex="6" title="阅读并同意《使用协议》方可注册"
/>
</div>

<style>
div {

300px;
border: 10px solid white;
padding: 0px;
margin: 0px;
}
</style>


</body>
</html>

手打。

原文地址:https://www.cnblogs.com/yitaqiotouto/p/9658012.html