html表单前端验证,前端表单验证

* {

margin: 0px;

padding: 0px;

}

body {

font-family: "微软雅黑";

}

#wrapper {

width: 100%;

height: 633px;

background-color:black;

}

#wrapper #logo {

height: 100px;

width: 680px;

margin-right: auto;

margin-left: auto;

}

#wrapper #logo .login {

height: 30px;

width: 180px;

font-size: 18px;

line-height: 30px;

margin-top: 70px;

color: #FFFFFF;

margin-left: 100px;

float: right;

}

#wrapper #logo .login a {

color: white;

text-decoration: none;

}

#wrapper #logo .login a:hover {

text-decoration: underline;

}

#wrapper #divform {

height: 450px;

width: 570px;

margin-right: auto;

margin-left: auto;

background-color: rgba(173, 173, 173, 0.3);

border-radius: 20px;

padding-top: 30px;

}

#wrapper #divform p {

color: #FFFFFF;

text-align: center;

font-size: 28px;

height: 40px;

width: 300px;

margin-right: auto;

margin-left: auto;

margin-top: 15px;

}

#wrapper #divform table {

margin-top: 25px;

margin-right: auto;

margin-bottom: 0;

margin-left: auto;

}

#wrapper #divform .td {

height: 55px;

width: 90px;

font-size: 18px;

color: #FFFFFF;

line-height: 55px;

text-align: right;

padding-right: 20px;

}

#wrapper #divform #mailbox, #nickname, #phnumber, #stylename, #password1, #password2 {

height: 30px;

width: 230px;

color: #FFFFFF;

font-size: 14px;

text-indent: 5px;

background-color: rgba(173, 173, 173, 0.2);

border: 1px solid #000000;

border-radius: 5px;

}

#wrapper #divform input:hover {

border: 1px solid #FFFFFF;

background-color: black;

color: white;

}

#wrapper #divform #box1, #box2, #box3, #box4, #box5, #box6 {

display: none;

height: 20px;

color: #FFFFFF;

line-height: 20px;

font-size: 12px;

background-color: rgba(0, 0, 0, 0.8);

border: 1px dashed #FFFFFF;

position: absolute;

margin-left: 195px;

border-radius: 5px;

font-size: 12px;

text-align: center;

}

#wrapper #divform #box1 {

margin-top: 45px;

width: 235px;

}

#wrapper #divform #box2 {

margin-top: 100px;

width: 210px;

}

#wrapper #divform #box3 {

margin-top: 155px;

width: 290px;

}

#wrapper #divform #box4 {

margin-top: 210px;

width: 280px;

}

#wrapper #divform #box5 {

margin-top: 265px;

width: 190px;

}

#wrapper #divform #box6 {

margin-top: 320px;

width: 210px;

}

#wrapper #divform #btn {

width: 300px;

height: 30px;

margin-left: auto;

margin-right: auto;

margin-top: 25px;

}

#wrapper #divform #btn #submit {

height: 30px;

width: 120px;

font-size: 14px;

float: left;

background-color: rgba(173, 173, 173, 0.2);

color: black;

border: 1px solid #000000;

border-radius: 5px;

}

#wrapper #divform #btn #submit:hover {

background-color: black;

color: white;

border: 1px solid #FFFFFF;

}

#wrapper #divform #btn #resetting {

height: 30px;

width: 120px;

float: right;

font-size: 14px;

background-color: rgba(173, 173, 173, 0.2);

color: black;

border: 1px solid #000000;

border-radius: 5px;

}

#wrapper #divform #btn #resetting:hover {

background-color: black;

color: white;

border: 1px solid #FFFFFF;

}

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值