html+css实现简单的注册表单验证代码

html+css实现简单的注册表单验证代码

html+css实现简单的注册表单验证代码

新建html文档。

书写hmtl代码。

书写css代码。

* { margin: 0; padding: 0; list-style-type: none; }

a, img { border: 0; }

body { font: 16/180% Arial, Helvetica, sans-serif, "微软雅黑", "黑体"; background: #eee; text-align: center; }

table { border-collapse: collapse; border-spacing: 0; }

td, th { padding: 0; }

.clear { clear: both; }

.clear:before, .clear:after { content: ""; display: table; }

.clear:after { clear: both; }

.form-div { background-color: rgba(255,255,255,0.27); border-radius: 10px; border: 1px solid #aaa; width: 424px; margin: 0 auto; padding: 30px 0 20px 0px; font-size: 12px; box-shadow: inset 0px 0px 10px rgba(255,255,255,0.5), 0px 0px 15px rgba(75,75,75,0.3); text-align: left; }

.form-div input[type="text"], .form-div input[type="password"], .form-div input[type="email"] { width: 268px; margin: 10px; line-height: 20px; font-size: 16px; }

.form-div input[type="checkbox"] { margin: 20px 0 20px 10px; }

.form-div input[type="button"], .form-div input[type="submit"] { margin: 10px 20px 0 0; }

.form-div table { margin: 0 auto; text-align: right; color: rgba(64,64,64,1.00); }

.form-div table img { vertical-align: middle; margin: 0 0 5px 0; }

.footer { color: rgba(64,64,64,1.00); font-size: 12px; margin-top: 30px; }

.form-div .buttons { float: right; }

input[type="text"], input[type="password"], input[type="email"] { border-radius: 8px; box-shadow: inset 0 2px 5px #eee; padding: 10px; border: 1px solid #D4D4D4; color: #333333; margin-top: 5px; }

input[type="text"]:focus, input[type="password"]:focus, input[type="email"]:focus { border: 1px solid #50afeb; outline: none; }

input[type="button"], input[type="submit"] { padding: 7px 15px; background-color: #3c6db0; text-align: center; border-radius: 5px; overflow: hidden; min-width: 80px; border: none; color: #FFF; box-shadow: 1px 1px 1px rgba(75,75,75,0.3); }

input[type="button"]:hover, input[type="submit"]:hover { background-color: #5a88c8; }

input[type="button"]:active, input[type="submit"]:active { background-color: #5a88c8; }

代码整体结构。

查看效果。