css寫的注冊頁面的代碼
<html>
<head>
??? <meta charset="UTF-8">
??? <title>注冊頁面</title>
<style>
??? *{
??????? margin: 0px;
??????? padding: 0px;
??????? box-sizing: border-box;
??? }
??? body{
??????? background: url("img/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{
??????? /*border: 1px solid red;*/
??????? float: left;
??????? margin: 15px;
??? }
??? .rg_left > p:first-child{
??????? color:#FFD026;
??????? font-size: 20px;
??? }
??? .rg_left > p:last-child{
??????? color:#A6A6A6;
??????? font-size: 20px;
??? }
??? .rg_center{
??????? float: left;
?????? /* border: 1px solid red;*/
??? }
??? .rg_right{
??????? /*border: 1px solid red;*/
??????? 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,#name,#tel,#birthday,#checkcode{
??????? width: 251px;
??????? height: 32px;
??????? border: 1px solid #A6A6A6 ;
??????? /*設(shè)置邊框圓角*/
??????? border-radius: 5px;
??????? padding-left: 10px;
??? }
??? #checkcode{
??????? width: 110px;
??? }
??? #img_check{
??????? height: 32px;
??????? vertical-align: middle;
??? }
??? #btn_sub{
??????? width: 150px;
??????? height: 40px;
??????? background-color: #FFD026;
??????? border: 1px solid #FFD026 ;
??? }
</style>
</head>
<body>
<div>
??? <div>
??????? <p>新用戶注冊</p>
??????? <p>USER REGISTER</p>
??? </div>
??? <div>
??????? <div>
??????????? <!--定義表單 form-->
??????????? <form action="#" method="post">
??????????????? <table>
??????????????????? <tr>
??????????????????????? <td><label for="username">用戶名</label></td>
??????????????????????? <td><input type="text" name="username" id="username" placeholder="請輸入用戶名"></td>
??????????????????? </tr>
??????????????????? <tr>
??????????????????????? <td><label for="password">密碼</label></td>
??????????????????????? <td><input type="password" name="password" id="password" placeholder="請輸入密碼"></td>
??????????????????? </tr>
?? ??? ??? ??? ??? ? <tr>
??????????????????????? <td><label for="password">確認密碼</label></td>
??????????????????????? <td><input type="password" name="password" id="password" placeholder="請再次輸入密碼"></td>
??????????????????? </tr>
??????????????????? <!-- <tr> -->
??????????????????????? <!-- <td><label for="email">Email</label></td> -->
??????????????????????? <!-- <td><input type="email" name="email" id="email" placeholder="請輸入郵箱"></td> -->
??????????????????? <!-- </tr> -->
??????????????????? <!-- <tr> -->
??????????????????????? <!-- <td><label for="name">姓名</label></td> -->
??????????????????????? <!-- <td><input type="text" name="name" id="name" placeholder="請輸入姓名"></td> -->
??????????????????? <!-- </tr> -->
??????????????????? <!-- <tr> -->
??????????????????????? <!-- <td><label for="tel">手機號</label></td> -->
??????????????????????? <!-- <td><input type="text" name="tel" id="tel" placeholder="請輸入手機號"></td> -->
??????????????????? <!-- </tr> -->
??????????????????? <!-- <tr> -->
??????????????????????? <!-- <td><label>性別</label></td> -->
??????????????????????? <!-- <td> -->
??????????????????????????? <!-- <input type="radio" name="gender" value="male"> 男 -->
??????????????????????????? <!-- <input type="radio" name="gender" value="female"> 女 -->
??????????????????????? <!-- </td> -->
??????????????????? <!-- </tr> -->
??????????????????? <!-- <tr> -->
??????????????????????? <!-- <td><label for="birthday">出生日期</label></td> -->
??????????????????????? <!-- <td><input type="date" name="birthday" id="birthday" placeholder="請輸入出生日期"></td> -->
??????????????????? <!-- </tr> -->
??????????????????? <tr>
??????????????????????? <td><label for="checkcode" >驗證碼</label></td>
??????????????????????? <td><input type="text" name="checkcode" id="checkcode" placeholder="請輸入驗證碼">
??????????????????????????? <img id="img_check" src="img/verify_code.jpg">
??????????????????????? </td>
??????????????????? </tr>
??????????????????? <tr>
??????????????????????? <td colspan="2"><input type="submit" id="btn_sub" value="登錄"></td>
??????????????????? </tr>
??????????????? </table>
??????????? </form>
??????? </div>
??? </div>
??? <div>
??????? <p>已有賬號?<a href="#">立即登錄</a></p>
??? </div>
</div>
</body>
</html>
標(biāo)簽：
