javaweb/css/registration_page_css/registration_page_css.html at master · CPU-Code/javaweb · GitHub

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
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
<!--
 * @由于个人水平有限, 难免有些错误, 还请指点:
 * @Author: cpu_code
 * @Date: 2020-10-09 18:21:51
 * @LastEditTime: 2020-10-09 21:14:56
 * @FilePath: \web\css\registration_page_css\registration_page_css.html
 * @Gitee: [https://gitee.com/cpu_code](https://gitee.com/cpu_code)
 * @Github: [https://github.com/CPU-Code](https://github.com/CPU-Code)
 * @CSDN: [https://blog.csdn.net/qq_44226094](https://blog.csdn.net/qq_44226094)
 * @Gitbook: [https://923992029.gitbook.io/cpucode/](https://923992029.gitbook.io/cpucode/)
-->
<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>注册页面 css</title>

        <style>
            *{
                margin: 0px;
                padding: 0px;
                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;
                background-color: white;
                /*让div水平居中*/
                margin: auto;
            }

            .rg_left{
                float: left;
                margin: 15px;
            }

            .rg_left > p:first-child{
                color: #ffddaa;
                font-size: 20px;
            }

            .rg_left > p:last-child{
                color: #aaccaa;
                font-size: 15px;
            }

            .rg_center{
                float: left;
            }

            .rg_right{
                float: right;
                margin: 15px;
            }

            .rg_right > p:first-child{
                font-size: 15px;
            }

            .rg_right p a{
                color: pink;
            }

            .td_left{
                width: 100px;
                text-align: right;
                height: 45px;
            }

            .td_right{
                padding-left: 50px;
            }

            #username,#password,#email{
                width: 251px;
                height: 32px;
                border: 1px solid #A6A6A6 ;

                /*设置边框圆角*/
                border-radius: 5px;
                padding-left: 10px;
            }

            #btn_sub{
                width: 150px;
                height: 40px;
                background-color: #aadd11;
                border: 1px solid #ddff99;
            }

        </style>
    </head>

    <body>
        <div class="rg_layout">
            <div class="rg_left">
                <p>新用户注册</p>
                <p>USER REGISTER</p>
            </div>

            <div class="rg_center">
                <div class="rg_from">
                    <!--定义表单 form-->
                    <form action="#" method="post">
                        <table>
                            <tr>
                                <td class="td_left">
                                    <label for="username"> 用户名 </label>
                                </td>

                                <td class="td_right">
                                    <input type="text" name="username" id="username" placeholder="请输入用户名">
                                </td>
                            </tr>

                            <tr>
                                <td class="td_left">
                                    <label for="password">密码</label>
                                </td>

                                <td class="td_right">
                                    <input type="password" name="password" id="password" placeholder="请输入密码">
                                </td>
                            </tr>

                            <tr>
                                <td class="td_left">
                                    <label for="email">email</label>
                                </td>

                                <td class="td_right">
                                    <input type="email" name="email" id="email" placeholder="输入邮件">
                                </td>
                            </tr>

                            <tr>
                                <td class="td_left">
                                    <label>性别</label>
                                </td>

                                <td class="td_right">
                                    <input type="radio" name="gender" value="male"> 男
                                    <input type="radio" name="gender" value="female"> 女
                                </td>
                            </tr>

                            <tr>
                                <td colspan="2" align="center">
                                    <input type="submit" id="btn_sub" value="注册">
                                </td>
                            </tr>

                        </table>
                    </form>
                </div>
            </div>

            <div class="rg_right">
                <p>已有账号?<a href="#">立即登录</a></p>
            </div>
        </div>
    </body>
</html>