html+css+jQuery会员注册表单

html+css+jQuery会员注册表单

html+css+jQuery会员注册表单

新建html文档。

书写hmtl代码。

初始化css代码。

书写css代码。

body, form, dd, ul, li { padding: 0; margin: 0; }

body { font-family: '微软雅黑'; }

form { width: 600px; height: 300px; margin: 50px auto 0 auto; }

dd { width: 560px; height: 60px; position: relative; left: 40px; }

.user_dd { margin-top: 20px; }

input[type=submit] { display: block; margin-left: 80px; width: 120px; height: 35px; color: white; font-size: 24px; background: orange; border-radius: 5px; }

input:hover { outline: none; }

input { width: 160px; height: 24px; border: 1px solid #ccc; }

.info, .safe { display: none; margin-left: 5px; width: 247px; height: 30px; background: url(img/info.gif) no-repeat; position: absolute; left: 250px; top: 0; color: #666; padding: 10px 0 0 40px; }

.user_put { height: 80px; line-height: 26px; }

.pass_put { height: 60px; line-height: 26px; }

.info_error { display: none; width: 247px; height: 30px; margin-left: 5px; background: url(img/info.gif) no-repeat 0 -190px; position: absolute; left: 250px; top: 0; color: red; padding: 10px 0 0 40px; }

.info p, .safe p { width: 282px; height: 1px; background: #B9E3FF; position: absolute; left: 5px; top: 23px; }

.info_error p { width: 282px; height: 1px; background: #FFC7C7; position: absolute; left: 5px; top: 24px; }

.user_put p { top: 73px; }

.pass_put p { top: 53px; }

.safe .s { display: inline-block; width: 12px; height: 12px; border: 1px solid #ccc; background: #ccc; }

.ok { display: none; width: 20px; height: 20px; background: url(img/ok.gif) no-repeat; position: absolute; left: 260px; top: 8px; }

.word { margin-left: 5px; color: #000; }

.auto_complete { display: none; width: 160px; height: 120px; background: #eee; border: 1px solid #ccc; list-style-type: none; position: absolute; left: 78px; z-index: 10; }

.auto_complete li { width: 100%; height: 30px; line-height: 30px; border-bottom: 1px solid #ff3; font-size: 10px; cursor: pointer; }

.auto_complete li:hover { background: #ff8; }

.auto_complete .last_li { border-bottom: none; }

代码整体结构

查看效果