HTML 和 CSS 简单实现注册页面- 前端开发

文章目录

一、效果页面

在这里插入图片描述

二、代码

1. 页面样式代码

*{
    margin: 0px;/*所有的外边距为0*/
    padding: 0px;/*所有的内边距为0*/
    box-sizing: border-box;/*规定两个并排的带边框的框*/
}
body{
    background: url("image/register_bg.png")no-repeat center;
    padding-top: 25px;
}
.rg_layout{
    width: 900px;
    height: 500px;
    border: 8px solid #EEEEEE;/*solid 定义实线*/
    background-color: white;
    margin: auto;
}
.rg_left{
    float: left;
    margin: 15px;
}
.rg_left>p:first-child{
    color: #FFD026;
    font-size: 20px;
}
.rg_left>p:last-child{
    color: #A6A6A6;
    font-size: 20px;
}

.rg_center{
    float: left;
}

.rg_right{
    float: right;
    margin: 15px;
    padding-left: 50px;
}
.rg_right p{
    font-size: 15px;
}
.rg_right p a{
    color: coral;
}
.td_left{
    width: 100px;
    text-align: right;
    height: 45px;
}
.td_right{
    padding-left: 50px;
}
#username,#password,#email,#name,#tel,#birthday,#checkcode{
    width: 251px;
    height: 32px;
    border: 1px solid #A6A6A6;
    /*设置边框圆角*/
    border-radius: 5px;
    padding-left: 10px;
}
#checkcode{
    width: 110px;
}
#img_check{
    height: 32px;
    vertical-align: middle;/*设置图片的位置垂直居中*/
}
#btn_sub{
    width: 100px;
    height: 40px;
    background-color: #FFD026;
    border: 1px solid #FFD026;
    padding-left: 10px;
}

2. 页面内容代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>注册页面</title>
    <!--    引入格式文件-->
    <link rel="stylesheet" href="html&css.css">
</head>
<body>
    <div class="rg_layout">
        <div class="rg_left">
            <p>新用户注册</p>
            <p>USER REGISTER</p>
        </div>
        <div class="rg_center">
            <div class="rg_form">
                <form action="#" method="post">
                    <table>
                        <tr><!--label 标签的作用是当点击文字也会跳到文本输出框-->
                            <!--for属性与ID属性对应规定 label 绑定到哪个表单元素。-->
                            <td class="td_left"><label for="username">用户名</label> </td>
                            <td class="td_right"><input type="text" name="username" id="username"> </td>
                        </tr>
                        <tr>
                            <td class="td_left"><label for="password">密码</label> </td>
                            <td class="td_right"><input type="password" name="password" id="password"> </td>
                        </tr>
                        <tr><!--label 标签的作用是当点击文字也会跳到文本输出框-->
                            <td class="td_left"><label for="email">email</label> </td>
                            <td class="td_right"><input type="email" name="email" id="email"> </td>
                        </tr>
                        <tr>
                            <td class="td_left"><label for="name">姓名</label> </td>
                            <td class="td_right"><input type="text" name="name" id="name"> </td>
                        </tr>
                        <tr>
                            <td class="td_left"><label for="tel">手机号</label> </td>
                            <td class="td_right"><input type="text" name="tel" 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"><label for="birthday">出生日期</label> </td>
                            <td class="td_right"><input type="date" name="birthday" id="birthday"> </td>
                        </tr>
                        <tr>
                            <td class="td_left"><label for="checkcode">验证码</label> </td>
                            <td class="td_right">
                                <input type="text" name="username" id="checkcode">
                                <img src="image/verify_code.jpg" id="img_check">
                            </td>
                        </tr>
                        <tr>
                            <td colspan="2" align="center">
                                <input type="submit" value="注册" id="btn_sub">
                            </td>
                        </tr>

                    </table>
                </form>
            </div>
        </div>
        <div class="rg_right">
            <p>已有账号？<a href="#">立即登录</a></p>
        </div>
    </div>
</body>
</html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73