标签：you padding 20px 注册页面 form ace ica 示例 gen
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>注册页面</title> 6 <style> 7 *{ 8 margin: 0px; 9 padding: 0px; 10 box-sizing: border-box; 11 } 12 body{ 13 background: url("img/register_bg.png") no-repeat center; 14 padding-top: 25px; 15 } 16 17 .rg_layout{ 18 width: 900px; 19 height: 500px; 20 border: 8px solid #EEEEEE; 21 background-color: white; 22 /*让div水平居中*/ 23 margin: auto; 24 } 25 26 .rg_left{ 27 /*border: 1px solid red;*/ 28 float: left; 29 margin: 15px; 30 } 31 .rg_left > p:first-child{ 32 color:#FFD026; 33 font-size: 20px; 34 } 35 36 .rg_left > p:last-child{ 37 color:#A6A6A6; 38 font-size: 20px; 39 40 } 41 .rg_center{ 42 float: left; 43 /* border: 1px solid red;*/ 44 45 } 46 47 .rg_right{ 48 /*border: 1px solid red;*/ 49 float: right; 50 margin: 15px; 51 } 52 53 .rg_right > p:first-child{ 54 font-size: 15px; 55 56 } 57 .rg_right p a { 58 color:pink; 59 } 60 61 .td_left{ 62 width: 100px; 63 text-align: right; 64 height: 45px; 65 } 66 .td_right{ 67 padding-left: 50px ; 68 } 69 70 #username,#password,#email,#name,#tel,#birthday,#checkcode{ 71 width: 251px; 72 height: 32px; 73 border: 1px solid #A6A6A6 ; 74 /*设置边框圆角*/ 75 border-radius: 5px; 76 padding-left: 10px; 77 } 78 #checkcode{ 79 width: 110px; 80 } 81 82 #img_check{ 83 height: 32px; 84 vertical-align: middle; 85 } 86 87 #btn_sub{ 88 width: 150px; 89 height: 40px; 90 background-color: #FFD026; 91 border: 1px solid #FFD026 ; 92 } 93 94 </style> 95 96 </head> 97 <body> 98 99 <div class="rg_layout"> 100 <div class="rg_left"> 101 <p>新用户注册</p> 102 <p>USER REGISTER</p> 103 104 </div> 105 106 <div class="rg_center"> 107 <div class="rg_form"> 108 <!--定义表单 form--> 109 <form action="#" method="post"> 110 <table> 111 <tr> 112 <td class="td_left"><label for="username">用户名</label></td> 113 <td class="td_right"><input type="text" name="username" id="username" placeholder="请输入用户名"></td> 114 </tr> 115 116 <tr> 117 <td class="td_left"><label for="password">密码</label></td> 118 <td class="td_right"><input type="password" name="password" id="password" placeholder="请输入密码"></td> 119 </tr> 120 121 <tr> 122 <td class="td_left"><label for="email">Email</label></td> 123 <td class="td_right"><input type="email" name="email" id="email" placeholder="请输入邮箱"></td> 124 </tr> 125 126 <tr> 127 <td class="td_left"><label for="name">姓名</label></td> 128 <td class="td_right"><input type="text" name="name" id="name" placeholder="请输入姓名"></td> 129 </tr> 130 131 <tr> 132 <td class="td_left"><label for="tel">手机号</label></td> 133 <td class="td_right"><input type="text" name="tel" id="tel" placeholder="请输入手机号"></td> 134 </tr> 135 136 <tr> 137 <td class="td_left"><label>性别</label></td> 138 <td class="td_right"> 139 <input type="radio" name="gender" value="male"> 男 140 <input type="radio" name="gender" value="female"> 女 141 </td> 142 </tr> 143 144 <tr> 145 <td class="td_left"><label for="birthday">出生日期</label></td> 146 <td class="td_right"><input type="date" name="birthday" id="birthday" placeholder="请输入出生日期"></td> 147 </tr> 148 149 <tr> 150 <td class="td_left"><label for="checkcode" >验证码</label></td> 151 <td class="td_right"><input type="text" name="checkcode" id="checkcode" placeholder="请输入验证码"> 152 <img id="img_check" src="img/verify_code.jpg"> 153 </td> 154 </tr> 155 <tr> 156 <td colspan="2" align="center"><input type="submit" id="btn_sub" value="注册"></td> 157 </tr> 158 </table> 159 </form> 160 </div> 161 </div> 162 163 <div class="rg_right"> 164 <p>已有账号?<a href="#">立即登录</a></p> 165 </div> 166 </div> 167 </body> 168 </h
标签：you padding 20px 注册页面 form ace ica 示例 gen
原文地址：https://www.cnblogs.com/aaaazzzz/p/12807542.html
