• HTML5&CSS3经典动态表格


      1 <!doctype html>
      2 <html lang="en">
      3  <head>
      4   <meta charset="UTF-8">
      5   <meta name="Generator" content="EditPlus®">
      6   <meta name="Author" content="">
      7   <meta name="Keywords" content="">
      8   <meta name="Description" content="">
      9   <title>HTML5&CSS3经典动态表格</title>
     10   <style>
     11     *:focus{outline:none}
     12     *{list-style-type:none;margin:0;padding:0}
     13     /*style*/
     14     #myForm h2,#myForm label{font-family: Georgia, Times, "Times New Roman", serif;display:inline}
     15     #Tips,#Notes{font-size:11px;}
     16     #Tips{display:inline;float:right;margin-top:20px;color:#d45252;}
     17     /*ul*/
     18     #myForm ul{width:800px;}
     19     /*li*/
     20     #myForm li{padding:12px;position:relative;border-bottom:1px dashed #eee}
     21     #myForm li:first-child,#myForm li:last-child{border-bottom:1px solid #666}
     22     /*label*/
     23     #myForm label{width: 150px;margin-top: 3px;display: inline-block;float: left;padding: 3px;}
     24     /*input*/
     25     #myForm input{height: 20px;width: 220px;padding: 5px 8px;}
     26     /*textarea*/
     27     #myForm textarea{width:300px;padding:8px;}
     28     
     29     /*Notes*/
     30     #Notes{background: #d45252;
     31         border-radius: 3px 3px 3px 3px;
     32         color: white;
     33         margin-left: 8px;
     34         padding: 5px 6px;
     35         z-index: 99999;
     36         position: absolute;
     37         display: none;
     38         }
     39     #myForm input:focus +#Notes{display: inline;}
     40     /*animation*/
     41     #myForm input,#myForm textarea{
     42         border: 1px solid #aaa;
     43         box-shadow: 0px 0px 3px #ccc;
     44         border-radius: 2px;
     45         padding-right: 30px;
     46         -moz-transition: padding 0.25s;
     47         -webkit-transition: padding 0.25s;
     48         -o-transition: padding 0.25s;
     49         transition: padding 0.25s;
     50     }
     51     #myForm input:focus,#myForm textarea:focus {
     52         background: #fff;
     53         border: 1px solid #555;
     54         box-shadow: 0 0 3px #aaa;
     55         padding-right: 70px;
     56         border-color: #b03535;
     57     }
     58     /*border-color*/
     59     #myForm input:required,#myForm textarea:required{   
     60         box-shadow: 0 0 5px #5cd053;
     61         border-color: #28921f;
     62     }
     63     #myForm input:focus,#myForm textarea:focus {border-color: #b03535;box-shadow: 0 0 5px #d45252;}
     64     /****button*****/
     65     button.submit {
     66         margin-left:155px;
     67         background-color: #68b12f;
     68         background: -webkit-gradient(linear, left top, left bottom, from(#68b12f), to(#50911e));
     69         background: -webkit-linear-gradient(top, #68b12f, #50911e);
     70         background: -moz-linear-gradient(top, #68b12f, #50911e);
     71         background: -ms-linear-gradient(top, #68b12f, #50911e);
     72         background: -o-linear-gradient(top, #68b12f, #50911e);
     73         background: linear-gradient(top, #68b12f, #50911e);
     74         border: 1px solid #509111;
     75         border-bottom: 1px solid #5b992b;
     76         border-radius: 3px;
     77         -webkit-border-radius: 3px;
     78         -moz-border-radius: 3px;
     79         -ms-border-radius: 3px;
     80         -o-border-radius: 3px;
     81         box-shadow: inset 0 1px 0 0 #9fd574;
     82         -webkit-box-shadow: 0 1px 0 0 #9fd574 inset;
     83         -moz-box-shadow: 0 1px 0 0 #9fd574 inset;
     84         -ms-box-shadow: 0 1px 0 0 #9fd574 inset;
     85         -o-box-shadow: 0 1px 0 0 #9fd574 inset;
     86         color: white;
     87         font-weight: bold;
     88         padding: 6px 20px;
     89         text-align: center;
     90         text-shadow: 0 -1px 0 #396715;
     91     }
     92     button.submit:hover {
     93         opacity: 0.85;
     94         cursor: pointer;
     95     }
     96     button.submit:active {
     97         border: 1px solid #20911e;
     98         box-shadow: 0 0 10px 5px #356b0b inset;
     99         -webkit-box-shadow: 0 0 10px 5px #356b0b inset;
    100         -moz-box-shadow: 0 0 10px 5px #356b0b inset;
    101         -ms-box-shadow: 0 0 10px 5px #356b0b inset;
    102         -o-box-shadow: 0 0 10px 5px #356b0b inset;
    103     }
    104   </style>
    105  </head>
    106  <body>
    107     <form id="myForm" action="#" method="post" name="myForm">
    108         <ul>
    109             <li>
    110                 <h2>用户注册</h2>
    111                 <span id="Tips">*必须认真填写*</span>
    112             </li>
    113             <li>
    114                 <label for="name">用户名:</label>
    115                 <input type="text" placeholder="Super_walker" required>
    116             </li>
    117             <li>
    118                 <label for="password">密码:</label>
    119                 <input type="password" placeholder="bluehawk***" required>
    120                 <span id="Notes">请输入用户密码!</span>
    121             </li>
    122             <li>
    123                 <label for="email">邮箱:</label>
    124                 <input type="text" placeholder="super_vipboy@163.com" required>
    125                 <span id="Notes">例如: "name@something.com"</span>
    126             </li>
    127             <li>
    128                 <label for="website">个人网站:</label>
    129                 <input type="url" placeholder="http://www.cnblogs.com/-walker/" pattern="(http|https)://.+" required>
    130                 <span id="Notes">例如: "http://someaddress.com"</span>
    131             </li>
    132             <li>
    133                 <label for="message">个人信息:</label>
    134                 <textarea name="message" cols="40" rows="6" required></textarea>
    135             </li>
    136             <li>
    137                 <button class="submit" type="submit">注册</button>
    138             </li>
    139         </ul>
    140     </form>
    141  </body>
    142 </html>

    <!doctype html>HTML5&CSS3经典动态表格

    • 用户注册

      *必须认真填写*
    • 请输入用户密码!
    • 例如: "name@something.com"
    • 例如: "http://someaddress.com"
  • 相关阅读:
    PHP siege 压测 QPS大小
    macOs 使用Homebrew升级到MySQL 8系列之后,php无法连接解决方法
    Nginx无法加载.woff .eot .svg .ttf等解决办法
    layer 点击弹出图片
    glusterFS系统中文管理手册(转载)
    Linux 命令行总结
    linux /proc/meminfo 文件分析(转载)
    每秒执行一个shell脚本(转载)
    python SMTP邮件发送(转载)
    Python XML解析(转载)
  • 原文地址:https://www.cnblogs.com/-walker/p/4985763.html
Copyright © 2020-2023  润新知