HTML_案例(注册案例CSS版)
Posted aikang525
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了HTML_案例(注册案例CSS版)相关的知识，希望对你有一定的参考价值。
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>会员注册</title> 6 <style> 7 /*使用通配符设置margin设置文字行于行之间的宽度*/ 8 * 9 margin: 5px; 10 11 /*设置全页背景*/ 12 body 13 background: url("./img/register_bg.png") no-repeat center; 14 line-height: 1; 15 16 17 /*绘制登录框*/ 18 .beijing 19 border: 5px solid #EEEEEE; 20 width: 1000px; 21 height: 700px; 22 margin: auto; 23 background: white; 24 25 26 /*设置左上字体*/ 27 .d1 28 color: #FFD266; 29 30 .d2 31 color: #ABA9A7; 32 33 34 /*设置浮动调格式*/ 35 .zuo 36 float: left; 37 38 .zhong 39 float: left; 40 41 .you 42 float: right; 43 44 45 /*设置右边字体*/ 46 #p1 47 font-size: 10px; 48 49 #p2 50 color: red; 51 font-size: 10px; 52 53 54 /*设置中间格式*/ 55 /*设置文字右对齐颜色灰色*/ 56 .td_left 57 width: 100px; 58 height: 45px; 59 text-align: right; 60 color: #ABA9A7; 61 62 63 /*设置文本框长度*/ 64 .td_right 65 padding-left: 50px; 66 box-sizing: border-box; 67 68 #username,#password,#email,#name,#tel,#birthday,#checkcode 69 width: 251px; 70 height: 32px; 71 border: 1px solid #ABA9A7; 72 /*设置边框圆角*/ 73 border-radius: 10px; 74 75 #checkcode 76 width: 100px; 77 78 79 /*设置按钮*/ 80 #td_sub 81 width: 100px; 82 height: 30px; 83 background: #FFD266; 84 85 86 </style> 87 </head> 88 <body> 89 <div class="beijing"> 90 <div class="zuo"> 91 <p class="d1">新用户注册</p> 92 <p class="d2">USER REGISTER</p> 93 </div> 94 95 <div class="zhong"> 96 <table> 97 <tr> 98 <td class="td_left"><label for="username">用户名</label></td> 99 <td class="td_right"><input type="text" name="username" id="username" placeholder="请输入用户名"></td> 100 </tr> 101 102 <tr> 103 <td class="td_left"><label for="password">密码</label></td> 104 <td class="td_right"><input type="password" name="password" id="password" placeholder="请输入密码"></td> 105 </tr> 106 107 <tr> 108 <td class="td_left"><label for="email">Email</label></td> 109 <td class="td_right"><input type="email" name="email" id="email" placeholder="请输入邮箱"></td> 110 </tr> 111 112 <tr> 113 <td class="td_left"><label for="name">姓名</label></td> 114 <td class="td_right"><input type="text" name="name" id="name" placeholder="请输入姓名"></td> 115 </tr> 116 117 <tr> 118 <td class="td_left"><label for="tel">手机号</label></td> 119 <td class="td_right"><input type="text" name="tel" id="tel" placeholder="请输入手机号"></td> 120 </tr> 121 122 <tr> 123 <td class="td_left"><label>性别</label></td> 124 <td class="td_right"> 125 <input type="radio" name="gender" value="male"> 男 126 <input type="radio" name="gender" value="female"> 女 127 </td> 128 </tr> 129 130 <tr> 131 <td class="td_left"><label for="birthday">出生日期</label></td> 132 <td class="td_right"><input type="date" name="birthday" id="birthday" placeholder="请输入出生日期"></td> 133 </tr> 134 135 <tr> 136 <td class="td_left"><label for="checkcode" >验证码</label></td> 137 <td class="td_right"><input type="text" name="checkcode" id="checkcode" placeholder="请输入验证码"> 138 <img src="img/verify_code.jpg"> 139 </td> 140 </tr> 141 142 143 <tr> 144 <td colspan="2" align="center"><input id="td_sub" type="submit" value="注册"></td> 145 </tr> 146 </table> 147 </div> 148 149 <div class="you"> 150 <p id="p1">已有账号？<a id="p2" href="#">立即登录</a></p> 151 </div> 152 </div> 153 </table> 154 </body> 155 </html>
以上是关于HTML_案例(注册案例CSS版)的主要内容，如果未能解决你的问题，请参考以下文章