* { 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; }
1、当进行验证未输入失去焦点时,弹出提示框。
2、输入正确则input边框变成green,输入错误则input边框变成red。