使用HTML写一个完整的注册页面

在上一篇博客中，我简单地写了怎样通过使用HTML写一个简单的跳转登录页面，but，TMD太丑了，于是突发奇想+天马行空不如写一个完整注册页面和流程，呵呵，不废话直接上代码。

首先是第一个页面testlogin,代码如下：

    






  
    登 录

    

    账号              

    密码              

                        找回密码    注册账号

  

如图，点击“创建新账号”，然后做出跳转：

然后，是跳转后的第二个页面，testlogin1.html代码如下：

    
    



欢迎注册一站网运维平台系统，请详细阅读本协议，需同意以后方能继续。

    我同意: 
    
    

如图，勾选“我同意”--然后点击“继续”，继续跳转到注册页面，呵呵：

然后，就到了用户注册界面，代码如下，我是用form的方式来定义表单的：

    
    




    
用户的注册区域

    
        
            注册页面
        
        
            用户名：
            
                
            
            *不能以数字、下划线开头
        
        
            密码：
            
                
            
            *数字和字母的组合
        
        
            确认密码：
            
                
            
            *重新输入上面的密码
        
        
            性别：
            
                Man
                Woman
            
            *要慎重选择
        
        
            技术：
            
                java
                html
                php
                Python
                运维
            
            *可以多选
        
        
            国籍：
            
                
                    ---选择国家---
                    China
                    American
                    English
                    Japan
            
            *选择自己所在的国家
        
        
            
                 
                
                验证
            
        
    

如图，我跳，我跳，我继续跳,点击“提交”：

最后，注册成功，页面代码比较简单：

    
    


 你已经注册成功，Successful

具体的流程就这样，另外我的背景是自己写的css，然后镶嵌到自己的HTML文件里面去的，css的代码如下，testlogin.css：

/*按照样图要求，添加一个浅灰色背景*/
body{
    background-color: #F2F2F2;
}

/*设置内容模块距离顶部一个有一段距离150px*/
.content {
    margin-top: 150px;
}

/*登录和注册按钮的整体样式*/
.content button {
    height: 30px;/*登录和注册按钮的高度*/
    color:  white;/*登录和注册按钮字体颜色为白色*/
    font-size: 18px;/*登录和注册按钮的字体大小*/
    border: 0px;/*无边框*/
    padding: 0px;/*无内边距*/
    cursor: pointer;/*登录和注册按钮的选择时为手形状*/
}


/*登录面板*/
.content .panel {
    background-color: white;/*登录面板背景颜色为白色*/
    width: 302px;/*宽度为302px*/
    text-align: center;/*子内容居中*/
    margin: 0px auto;/*自身居中*/
    padding-top: 20px;/*顶部的内边距为20px*/
    padding-bottom: 20px;/*底部的内边距为20px*/
    border: 1px solid #ddd;/*边框颜色为灰色*/
    border-radius: 5px;/*边框边角有5px的弧度*/

}

/*登录和密码组*/
.content .panel .group {
    text-align: left;/*子内容居中*/
    width: 262px;/*宽度为262px*/
    margin: 0px auto 20px;/*自身居中，并距离底部有20px的间距*/
}
.content .panel .group label {
    line-height: 30px;/*高度为30px*/
    font-size: 18px;/*字体大小为18px*/
}
.content .panel .group input {
    display: block;/*设置为块，是为了让输入框独占一行*/
    width: 250px;/*宽度为250px*/
    height: 30px;/*高度为30px*/
    border: 1px solid #ddd;/*输入框的边框*/
    padding: 0px 0px 0px 10px;/*左边内边距为10px，显得美观*/
    font-size: 16px;/*字体大小*/
}
.content .panel .group input:focus{

    border-left: 1px solid #CC865E;/*当输入框成为焦点时，左边框颜色编程褐色*/
}
.content .panel .login button {
    background-color: #CC865E;/*按钮的背景颜色*/
    width: 260px;/*按钮的宽度*/
}
.content .panel .login button:hover {
    background-color: white;/*按钮选中后背景颜色为白色*/
    color:  #CC865E;/*按钮选中后字体颜色为褐色*/
    border: 1px solid #CC865E;/*按钮选中后边框颜色为褐色*/
}


/*注册按钮*/
.content .register {
    text-align: center;/*子内容居中*/
    margin-top: 20px;/*顶部的内边距为20px*/
}
.content .register button {
    background-color: #466BAF;/*按钮的背景颜色为蓝色*/
    width: 180px;/*按钮的宽度*/
}

.content .register button:hover {
    background-color: white;/*按钮选中后背景颜色为白色*/
    color: #466BAF;/*按钮选中后字体颜色为蓝色*/
    border: 1px solid #466BAF;/*按钮选中后边框颜色为蓝色*/
}

到最后，如有写得不好的地方，高手勿喷，毕竟本人菜鸟一枚。