JavaWeb8.6【CSS案例：註冊頁面(html+css)】
阿新 • • 發佈：2021-06-27
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 } 14body{ 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>