用HTML和CSS写注册登录界面

一.结果演示

注册界面:

登录界面：

二.主要代码展示

1.HTML部分

1.注册界面

       对于注册界面，可以将其划分为三个部分，分别为左边的“新用户注册”，中间的主体部分，以及右边的“已有账号？立即登录”部分。

<div class="rg_layout">
    <div class="rg_left">
        <p>新用户注册</p>
    </div>
    <div class="rg_center">

    </div>
    <div class="rg_right">已有账号？<a href="#">点击登录</a></div>
</div>

 其次，向主体部分加入form表单，里面嵌套着一个table表格。

<form action="#" method="post">
                <table>
                    <tr>
                        <td class="td_left"><label for="username">用户名</label></td>
                        <td class="td_right"><input type="text" name="userid" placeholder="请输入用户名" id="username"></td>
                    </tr>
                    <tr>
                        <td class="td_left">密码</td>
                        <td class="td_right"><input type="password" name="pwd" placeholder="请输入密码" id="password"></td>
                    </tr>
                    <tr>
                        <td class="td_left">E_mail</td>
                        <td class="td_right"><input type="email" name="email" placeholder="请输入邮箱" id="email"></td>
                    </tr>
                    <tr>
                        <td class="td_left">姓名</td>
                        <td class="td_right"><input type="text" name="name" placeholder="请输入姓名" id="name"></td>
                    </tr>
                    <tr>
                        <td class="td_left">手机号</td>
                        <td class="td_right"><input type="text" name="telephone_number" placeholder="请输入手机号" id="tel"></td>
                    </tr>
                    <tr>
                        <td class="td_left">性别</td>
                        <td class="td_right"><input type="radio" name="gender" value="male">男
                            <input type="radio" name="gender" value="female">女</td>
                    </tr>
                    <tr>
                        <td class="td_left">出生日期</td>
                        <td class="td_right"><input type="date" name="birthday" id="birth"></td>
                    </tr>
                    <tr>
                        <td class="td_left">验证码</td>
                        <td class="td_right"><input type="text" name="check" width="100%" id="check">
                            <img src="image/check_number.jpg" alt="" id="check_jpg"></td>
                    </tr>
                    <tr>
                        <td colspan="2" align="center"><input type="submit" value="注册" id="regist"></td>
                    </tr>
                </table>
            </form>

登录部分的HTML代码同理。

2.CSS部分

首先要调整三个主要部分的相对位置，使整个结构看起来更舒服。

   .rg_layout{
            border: 3px solid lawngreen;
            width: 900px;
            height: 500px;
            background: white;
            margin: auto;
            margin-top: 20px;
        }
        .rg_left{
            border: 1px solid black;
            float: left;
            margin-left: 20px;
        }
        .rg_right{
            border: 1px solid black;
            float: right;
            margin-top: 400px;
            padding-top: 20px;

        }
        .rg_center{
            border: 1px solid black;
            width: 400px;
            height: 450px;
            margin-left: 150px;
            margin-top: 20px;
            float: left;
        }

其次，调整表单中的表格样式。

.td_left{
            width:100px;
            text-align: right;
            height:40px;
        }
        .td_right{
          padding-left: 30px;
        }
        #username,#password,#name,#email,#tel,#birth,#check{
            width: 200px;
            height: 30px;
            border:1px solid gold;
            border-radius: 5px;/*设置为圆角*/
            padding-left:15px;
        }
        #check{
            width: 100px;
        }
        #check_jpg{
            width: 100px;
            height: 30px;
            vertical-align: middle;/*垂直居中*/
        }

最后是一些小细节，可以根据自己喜好进行设计。