• CSS-注册页面

     

    1. 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("../image/img/register_bg.png") ;
    14.     }
    15.  
    16.     .rg_layout{
    17.       width:900px;
    18.       height: 500px;
    19.       border:8px solid #EEEEEE;
    20.       background-color:white;
    21.       margin:auto;
    22.       margin-top:30px;
    23.     }
    24.         .rg_left{
    25.        /*   border:1px solid red;*/
    26.           float:left;
    27.           margin: 10px;
    28.         } .rg_center{
    29.         /*  border:1px solid red;*/
    30.           float:left;
    31.           width:500px;
    32.  
    33.         }
    34.           .rg_right{
    35.          /* border:1px solid red;*/
    36.           float:right;
    37.             margin:10px;
    38.         }
    39.           .rg_left >p:first-child{
    40.               color:#FFD026;
    41.             font-size:20px;
    42.           } .rg_left >p:last-child{
    43.                         color:#A6A6A6;
    44.                         font-size:20px;
    45.           }
    46.             .rg_right>p{
    47.               font-size:15px;
    48.             }
    49.             .rg_right p a{
    50.               color:pink;
    51.             }
    52.             .td-left{
    53.               width:100px;
    54.               text-align:right;
    55.               height:45px;
    56.             }
    57.             .td_right{
    58.               padding-left: 50px;
    59.             }
    60.             #username ,#password,#email,#tel,#name,#checkcode,#birthday{
    61.               width:251px;
    62.               height:32px;
    63.               border:1px solid #A6A6A6;
    64.               /*设置边框圆角*/
    65.               border-radius: 5px;
    66.               padding-left:10px;
    67.             }
    68.             #checkcode{
    69.               width:110px;
    70.             }
    71.             #img_check{
    72.               height:32px;
    73.               vertical-align: middle;
    74.             }
    75.             #sub{
    76.               width:150px;
    77.               height:40px;
    78.               background-color: #FFD026;
    79.               border:1px;
    80.             }
    81.   style>
    82. head>
    83. <body>
    84.       <div class="rg_layout">
    85.  
    86.         <div class="rg_left">
    87.           <p>新用户注册p>
    88.           <p>USER REGISTERp>
    89.         div>
    90.  
    91.         <div class="rg_center">
    92.             <div class="rg_form">
    93.               <from action="#" method="get">
    94.                 <table  >
    95.                   <tr>
    96.                     <td class="td-left" ><label for="username">用户名label>td>
    97.                     <td class="td_right"><input type="username" name="password" id="username" placeholder="请输入用户名">td>
    98.                   tr><tr>
    99.                   <td class="td-left" ><label for="password">密码label>td>
    100.                   <td class="td_right"><input type="password" name="password" id="password" placeholder="请输入密码">td>
    101.                 tr><tr>
    102.                   <td class="td-left" ><label for="email">Emaillabel>td>
    103.                   <td class="td_right"><input type="email" name="email" id="email" placeholder="请输入邮箱">td>
    104.                 tr><tr>
    105.                   <td class="td-left" ><label for="name">姓名label>td>
    106.                   <td class="td_right"><input type="text" name="name" id="name" placeholder="请输入姓名">td>
    107.                 tr><tr>
    108.                   <td class="td-left" ><label for="tel">手机号label>td>
    109.                   <td class="td_right"><input type="text" name="tel" id="tel" placeholder="请输入手机号">td>
    110.                 tr><tr>
    111.                   <td class="td-left" ><label >性别label>td>
    112.                   <td class="td_right"><input type="radio" name="gender"  value="male" checked="checked">男
    113.                     <input type="radio" name="gender" value="female">女td>
    114.                 tr><tr>
    115.                   <td class="td-left" ><label for="birthday">出生日期label>td>
    116.                   <td class="td_right"><input type="date" name="birthday" id="birthday" placeholder="请输入出生日期">td>
    117.                 tr><tr>
    118.                   <td class="td-left" ><label for="checkcode">验证码label>td>
    119.                   <td class="td_right" ><input type="text" name="checkcode" id="checkcode" placeholder="请输入验证码">
    120.                     <img id="img_check" src="../image/img/verify_code.jpg">td>
    121.                 tr><tr>
    122.  
    123.                   <td colspan="2" align="center"><input type="submit"  id ="sub" name="注册" >td>
    124.                 tr>
    125.  
    126.                 table>
    127.               from>
    128.             div>
    129.         div>
    130.  
    131.         <div class="rg_right">
    132.             <P>已有帐号？<a href="#">立即登录a>P>
    133.         div>

  • 相关阅读:
    shardingsphere分库分表示例（逻辑表，真实表，绑定表，广播表，单表）
    KMM初探
    【Python入门】Python的tuple容器
    Spring整合Junit单元测试
    使用 lua 运行 fscript
    朵拉钓鱼，快来一起钓鱼
    【电路设计】充电台灯电路拆解
    outsystems合集系列（二）
    从零手搓一个【消息队列】实现消息在文件中的存储
    【图像分割】DeepLabV3+
  • 原文地址：https://blog.csdn.net/qq_41790844/article/details/133782172