简单的注册页面
2016-10-16 11:48
246 查看
效果图:
代码:
代码:
<span style="font-size:18px;"><!doctype html> <html> <head> <meta charset="utf-8"> <title>简单注册页面</title> <style> body { margin: 0; font: 14px/1.4 "Microsoft YaHei"; background-color: #EDEFF0; } a { color: #50B6E5; } .constr { width: 1200px; margin-left: auto; margin-right: auto; } .regist-head { height: 60px; line-height: 60px; padding-left: 30px; background-color: #be3948; color: #fff; font-size: 18px; } .regist-body { min-height: 400px; padding: 100px 0; background-color: #fff; } .regist-main { width: 600px; margin-left: auto; margin-right: auto; } .regist-group { margin-top: 20px; overflow: hidden; } .regist-label { width: 70px; padding-top: 10px; float: left; } .regist-cell { display: table-cell; *display: inline-block; } .regist-input { height: 18px; line-height: 18px; width: 260px; padding: 10px 5px; margin: 0 10px 0 0; border: 1px solid #d0d6d9; vertical-align: top; } .regist-code-input { width: 130px; } .regist-btn { display: inline-block; width: 160px; line-height: 40px; background-color: #39b94e; color: #fff; text-align: center; text-decoration: none; } .regist-btn:hover { background-color: #33a646; } .icon-warn { display: inline-block; width: 20px; height: 21px; background: url(http://img.mukewang.com/5453084a00016ae300120012.gif) no-repeat center; } .regist-star { position: absolute; margin-left: -1em; font-family: simsun; color: #f30; } .regist-remark { position: absolute; line-height: 21px; padding-top: 9px; color: #666; } .regist-warn { padding-left: 20px; color: #be3948; } .regist-warn > .icon-warn { position: absolute; margin-left: -20px; } </style> </head> <body> <div class="constr"> <div class="regist-head">注册</div> <div class="regist-body"> <div class="regist-main"> <div class="regist-group"> <label class="regist-label"><span class="regist-star">*</span>登录邮箱</label> <div class="regist-cell"> <input type="email" class="regist-input"><span class="regist-remark regist-warn"> <i class="icon-warn"></i>邮箱格式不准确(演示) </span> </div> </div> <div class="regist-group"> <label class="regist-label"><span class="regist-star">*</span>登录密码</label> <div class="regist-cell"> <input type="password" class="regist-input"><span class="regist-remark"> 请输入6-16位密码,区分大小写,不能使用空格 </span> </div> </div> <div class="regist-group"> <label class="regist-label"><span class="regist-star">*</span>用户昵称</label> <div class="regist-cell"> <input type="password" class="regist-input"> </div> </div> <div class="regist-group"> <label class="regist-label">手机号码</label> <div class="regist-cell"> <input type="tel" class="regist-input"> </div> </div> <div class="regist-group"> <label class="regist-label"><span class="regist-star">*</span>验 证 码</label> <div class="regist-cell"> <input class="regist-input regist-code-input"><img src="http://1.jpg"> </div> </div> <div class="regist-group"> <label class="regist-label"> </label> <div class="regist-cell"> <input type="checkbox" checked><label>我已阅读并同意<a href="##">##协议</a>。</label> <p> <a href="javascript:" class="regist-btn">立即注册</a> </p> </div> </div> </div> </div> </div> </body> </html></span>
相关文章推荐
- Java Web基础--用户注册页面的简单实现
- JavaScript 注册登录页面的简单实现
- JS一个简单的注册页面实例
- HTML&CSS基础学习笔记1.22-一个简单的注册页面
- Android开发-UI控件:实现登陆页面并跳转和简单的注册页面
- 小白教程——Windows下用PHP写一个简单的登录注册页面(二)
- 简单的小清新表单登录注册页面~~
- 小KING教你做android项目(二)---实现登陆页面并跳转和简单的注册页面
- AJAX实现简单的注册页面异步请求实例代码
- 简单注册页面的javascript验证代码
- 简单注册页面
- HTML简单的注册页面搭建
- HTML&CSS基础学习笔记1.21-简单的注册页面
- 用AJAX实现页面登陆以及注册用户名验证的简单实例
- 超简单的登陆注册页面实现
- 简单的Html和JavaScript:用户注册页面
- PopupWindow在注册页面中的简单应用
- HTML第十三天作业,做一个QQ注册的简单页面
- 使用JDBC做一个简单的登录,注册页面!
- 学习用php+mysql做简单的会员注册页面(学习记录)20141106