标签：JavaWeb8.6 right solid width html rg border css left
1 <!DOCTYPE html>
2 <html lang="en">
3 <head>
4 <meta charset="UTF-8">
5 <title>注册页面(html)</title>
6 </head>
7 <style>
8
9 *{
10 margin: 0px;
11 padding: 0px;
12 box-sizing: border-box;
13 }
14 body{
15 background: url("../img/register_bg.png") no-repeat center;
16 }
17
18 .rg_layout{
19 width: 900px;
20 height: 500px;
21 border: 10px solid #EEEEEE;
22 background-color: white;
23 margin: auto; /*让div水平居中*/
24 padding: 15px;
25 margin-top: 20px;
26 }
27
28 .rg_left{
29 /*border: 1px solid red;*/
30 float: left;
31
32 margin: 15px;
33 }
34 .rg_left > p:first-child{
35 color: #FFD026;
36 font-size: 20px;
37 }
38 .rg_left > p:last-child{
39 color: #A6A6A6;
40 font-size: 20px;
41 }
42
43
44
45 .rg_center{
46 /*border: 1px solid red;*/
47 float: left;
48
49 width: 450px;
50 }
51 .td_left{
52 width: 100px;
53 text-align: right;
54 height: 45px;
55 }
56 .td_right{
57 padding-left: 50px;
58 }
59 #username,#password,#email,#name,#tel,#birthday,#checkcode{ /*ID选择器 + 并集选择器*/
60 width: 251px;
61 height: 32px;
62 border: 1px solid grey;
63 border-radius: 5px; /*设置边框圆角*/
64 padding-left: 10px;
65 }
66 #checkcode{
67 width: 110px;
68 }
69 #img_check{
70 height: 30px;
71 vertical-align: middle; /*垂直居中*/
72 }
73 #btn_sub{
74 width: 150px;
75 height: 40px;
76 background-color: yellow;
77 border: 1px solid yellow;
78 }
79
80
81
82 .rg_right{
83 /*border: 1px solid red;*/
84 float: right;
85
86 margin: 15px;
87 }
88 .rg_right > p:first-child{
89 font-size: 15px;
90 }
91 .rg_right p a{
92 color: pink;
93 }
94
95 </style>
96 <body>
97
98 <div class="rg_layout">
99 <div class="rg_left">
100 <p>新用户注册</p>
101 <p>USER REGISTER</p>
102 </div>
103
104 <div class="rg_center">
105 <div class="rg_form">
106 <form action="#" method="post">
107 <table>
108 <tr>
109 <td class="td_left"><label for="username">用户名</label></td>
110 <td class="td_right"><input type="text" name="username" id="username" placeholder="请输入用户名"></td>
111 </tr>
112 <tr>
113 <td class="td_left"><label for="password">密码</label></td>
114 <td class="td_right"><input type="password" name="password" id="password" placeholder="请输入密码"></td>
115 </tr>
116 <tr>
117 <td class="td_left"><label for="email">邮箱</label></td>
118 <td class="td_right"><input type="email" name="email" id="email" placeholder="请输入邮箱"></td>
119 </tr>
120 <tr>
121 <td class="td_left"><label for="name">姓名</label></td>
122 <td class="td_right"><input type="text" name="name" id="name" placeholder="请输入姓名"></td>
123 </tr>
124 <tr>
125 <td class="td_left"><label for="tel">手机号</label></td>
126 <td class="td_right"><input type="text" name="tel" id="tel" placeholder="请输入手机号"></td>
127 </tr>
128 <tr>
129 <td class="td_left"><label>性别</label></td>
130 <td class="td_right">
131 <input type="radio" name="gender" value="male">男
132 <input type="radio" name="gender" value="female">女
133 </td>
134 </tr>
135 <tr>
136 <td class="td_left"><label for="birthday">生日</label></td>
137 <td class="td_right"><input type="date" name="birthday" id="birthday"></td>
138 </tr>
139 <tr>
140 <td class="td_left"><label for="checkcode">验证码</label></td>
141 <td class="td_right">
142 <input type="text" name="checkcode" id="checkcode" placeholder="请输入验证码">
143 <img id="img_check" src="../img/verify_code.jpg">
144 </td>
145 </tr>
146 <tr>
147 <td colspan="2" align="center"><input type="submit" value="注册" id="btn_sub"></td>
148 </tr>
149 </table>
150 </form>
151 </div>
152 </div>
153
154 <div class="rg_right">
155 <p>已有账号?<a href="#">立即登录</a></p>
156 </div>
157 </div>
158
159 </body>
160 </html>
标签：JavaWeb8.6,right,solid,width,html,rg,border,css,left 来源： https://www.cnblogs.com/yppah/p/14939866.html
本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享； 2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关； 3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关； 4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除； 5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。