form注册表单

form注册表单  input  注册 ul  li

-------------------------------HTML------------------------------------------------

 

<form class="register">
<ul class="list">
<li>
<label>用户名：</label>
<input type="text" placeholder="5至16位字母和数字组合，请勿使用手机号码" />
</li>
<li>
<label>登录密码：</label>
<input type="text" placeholder="6至16位字母和数字组合" />
</li>
<li>
<label>确认密码：</label>
<input type="text" placeholder="再次输入密码" />
</li>
<li>
<label>手机号码：</label>
<input type="text" placeholder="13800138000" />
</li>
<li>
<label>验证码：</label>
<input type="text" placeholder="请输入验证码" class="input-small" />
<input type="button" class="ymz" />
</li>
<li>
<label class="color-01">账号：</label>
<input type="text" placeholder="请输入推荐人用户名" /><i class="star">*</i>
</li>
<li>
<label></label>
<p>
<input type="checkbox" class="checkbox" />我已经阅读并同意<a href="#" class="color-01">《网站服务协议》</a>
</p>
</li>
<li>
<label></label><input type="image" src="images/register-bg.png" />
</li>
</ul>
</form>
<!--form表单-->

 

---------------------------------CSS---------------------------------------------

 

 

html,
body {
background: #121C52;
width: 100%;
overflow-x: hidden;
}
/*zl-banner*/

.zl-banner {
width: 100%;
height: 1065px;
margin: 0 auto;
background: #060E23;
border: 1px transparent solid;
}
.banner-content {
width: 1000px;
height: 500px;
margin: 180px auto 0;
}
.register {
width: 420px;
height: 460px;
margin: 0 auto;
}
.list {
width: 420px;
}
.list li {
width: 420px;
height: 52px;
line-height: 52px;
margin-top: 5px;
clear: both;
}
.list li label {
font-size: 16px;
color: #FFFFFF;
width: 100px;
height: 52px;
line-height: 52px;
display: inline-block;
text-align: right;
float: left;
}
.list li input[type=text] {
width: 304px;
height: 52px;
line-height: normal;
line-height: 52px\9;
border: none;
color: #FFFFFF;
background: url(../images/txt-bg.png) no-repeat center;
text-indent: 10px;
float: left;
}
/*input[type="text"]:focus {
line-height: normal;
line-height: 52px\9;
}*/

.list li .input-small {
width: 154px!important;
height: 52px;
line-height: 52px;
border: none;
color: #FFFFFF;
background: url(../images/txt-small-bg.png) no-repeat center!important;
text-indent: 10px;
}
::-moz-placeholder {
color: #597AE2;
}
::-webkit-input-placeholder {
color: #597AE2;
}
::-ms-input-placeholder {
color: #597AE2;
}
.color-01 {
color: #FFE507!important;
}
.list li .star {
color: #FFE507;
width: 10px;
height: 10px;
display: inline-block;
font-style: normal;
}
.list li .ymz {
width: 147px;
height: 55px;
display: inline-block;
border: none;
background: url(../images/hqyzm.png) no-repeat center;
margin-left: 2px;
cursor: pointer;
}
.list li .submit {
width: 236px;
height: 58px;
display: inline-block;
background: url(../images/register-bg.png) no-repeat center;
border: none;
cursor: pointer;
}
.list li p {
color: #FFFFFF;
text-indent: 10px;
}
.list li .checkbox {
width: 17px;
height: 17px;
display: inline-block;
border: none;
vertical-align: middle;
margin-top: -2px;
background: url(../images/checkbox-bg.png) no-repeat center;
}
/*zl-banner*/

=============================================

 

demo 案例下载链接 https://files.cnblogs.com/files/leshao/form-list.rar