• 案例-注册页面(css)

    html页面用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("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.  
    42.  
    43.     .rg_center{
    44.         float: left;
    45.        /* border: 1px solid red;*/
    46.  
    47.     }
    48.  
    49.     .rg_right{
    50.         /*border: 1px solid red;*/
    51.         float: right;
    52.         margin: 15px;
    53.     }
    54.  
    55.     .rg_right > p:first-child{
    56.         font-size: 15px;
    57.  
    58.     }
    59.     .rg_right p a {
    60.         color:pink;
    61.     }
    62.  
    63.     .td_left{
    64.         width: 100px;
    65.         text-align: right;
    66.         height: 45px;
    67.     }
    68.     .td_right{
    69.         padding-left: 50px ;
    70.     }
    71.  
    72.     #username,#password,#email,#name,#tel,#birthday,#checkcode{
    73.         width: 251px;
    74.         height: 32px;
    75.         border: 1px solid #A6A6A6 ;
    76.         /*设置边框圆角*/
    77.         border-radius: 5px;
    78.         padding-left: 10px;
    79.     }
    80.     #checkcode{
    81.         width: 110px;
    82.     }
    83.  
    84.     #img_check{
    85.         height: 32px;
    86.         vertical-align: middle;
    87.     }
    88.  
    89.     #btn_sub{
    90.         width: 150px;
    91.         height: 40px;
    92.         background-color: #FFD026;
    93.         border: 1px solid #FFD026 ;
    94.     }
    95.  
    96. style>
    97.  
    98. head>
    99. <body>
    100.  
    101. <div class="rg_layout">
    102.     <div class="rg_left">
    103.         <p>新用户注册p>
    104.         <p>USER REGISTERp>
    105.  
    106.     div>
    107.  
    108.     <div class="rg_center">
    109.         <div class="rg_form">
    110.             
    111.             <form action="#" method="post">
    112.                 <table>
    113.                     <tr>
    114.                         <td class="td_left"><label for="username">用户名label>td>
    115.                         <td class="td_right"><input type="text" name="username" id="username" placeholder="请输入用户名">td>
    116.                     tr>
    117.  
    118.                     <tr>
    119.                         <td class="td_left"><label for="password">密码label>td>
    120.                         <td class="td_right"><input type="password" name="password" id="password" placeholder="请输入密码">td>
    121.                     tr>
    122.  
    123.                     <tr>
    124.                         <td class="td_left"><label for="email">Emaillabel>td>
    125.                         <td class="td_right"><input type="email" name="email" id="email" placeholder="请输入邮箱">td>
    126.                     tr>
    127.  
    128.                     <tr>
    129.                         <td class="td_left"><label for="name">姓名label>td>
    130.                         <td class="td_right"><input type="text" name="name" id="name" placeholder="请输入姓名">td>
    131.                     tr>
    132.  
    133.                     <tr>
    134.                         <td class="td_left"><label for="tel">手机号label>td>
    135.                         <td class="td_right"><input type="text" name="tel" id="tel" placeholder="请输入手机号">td>
    136.                     tr>
    137.  
    138.                     <tr>
    139.                         <td class="td_left"><label>性别label>td>
    140.                         <td class="td_right">
    141.                             <input type="radio" name="gender" value="male"> 男
    142.                             <input type="radio" name="gender" value="female"> 女
    143.                         td>
    144.                     tr>
    145.  
    146.                     <tr>
    147.                         <td class="td_left"><label for="birthday">出生日期label>td>
    148.                         <td class="td_right"><input type="date" name="birthday" id="birthday" placeholder="请输入出生日期">td>
    149.                     tr>
    150.  
    151.                     <tr>
    152.                         <td class="td_left"><label for="checkcode" >验证码label>td>
    153.                         <td class="td_right"><input type="text" name="checkcode" id="checkcode" placeholder="请输入验证码">
    154.                             <img id="img_check" src="img/verify_code.jpg">
    155.                         td>
    156.                     tr>
    157.  
    158.  
    159.                     <tr>
    160.                         <td colspan="2" align="center"><input type="submit" id="btn_sub" value="注册">td>
    161.                     tr>
    162.                 table>
    163.  
    164.             form>
    165.  
    166.  
    167.         div>
    168.  
    169.     div>
    170.  
    171.     <div class="rg_right">
    172.         <p>已有账号?<a href="#">立即登录a>p>
    173.     div>
    174.     
    175. div>
    176.  
    177. body>
    178. html>

  • 相关阅读:
    论文：Cover letter，添加基金项目：山东省自然科学基金
    前端Rust二进制/wasm全平台构建流程简述
    功率放大器的主要指标有哪些呢
    Vite2.0+Typescript+React+Antd+Less+Eslint+Prettier+Precommit构建标准化react应用
    大一C语言编程题库
    接口幂等性详解
    18年，51cto老师录视频- Vue.js前端开发基础与项目实战的接口，不能用了
    为什么要引入线程？
    Dubbo和Spring Cloud相关
    学人工智能等于失业？
  • 原文地址：https://blog.csdn.net/lee514/article/details/134275641