HTML5&CSS3经典动态表格 | CSS3经典动态表格

 <!doctype html>

 <html lang="en">

  <head>

   <meta charset="UTF-8">

   <meta name="Generator" content="EditPlus®">

   <meta name="Author" content="">

   <meta name="Keywords" content="">

   <meta name="Description" content="">

   <title>HTML5&CSS3经典动态表格</title>

   <style>

     *:focus{outline:none}

     *{list-style-type:none;margin:0;padding:0}

     /*style*/

     #myForm h2,#myForm label{font-family: Georgia, Times, "Times New Roman", serif;display:inline}

     #Tips,#Notes{font-size:11px;}

     #Tips{display:inline;float:right;margin-top:20px;color:#d45252;}

     /*ul*/

     #myForm ul{width:800px;}

     /*li*/

     #myForm li{padding:12px;position:relative;border-bottom:1px dashed #eee}

     #myForm li:first-child,#myForm li:last-child{border-bottom:1px solid #666}

     /*label*/

     #myForm label{width: 150px;margin-top: 3px;display: inline-block;float: left;padding: 3px;}

     /*input*/

     #myForm input{height: 20px;width: 220px;padding: 5px 8px;}

     /*textarea*/

     #myForm textarea{width:300px;padding:8px;}

     /*Notes*/

     #Notes{background: #d45252;

         border-radius: 3px 3px 3px 3px;

         color: white;

         margin-left: 8px;

         padding: 5px 6px;

         z-index: 99999;

         position: absolute;

         display: none;

         }

     #myForm input:focus +#Notes{display: inline;}

     /*animation*/

     #myForm input,#myForm textarea{

         border: 1px solid #aaa;

         box-shadow: 0px 0px 3px #ccc;

         border-radius: 2px;

         padding-right: 30px;

         -moz-transition: padding 0.25s;

         -webkit-transition: padding 0.25s;

         -o-transition: padding 0.25s;

         transition: padding 0.25s;

     }

     #myForm input:focus,#myForm textarea:focus {

         background: #fff;

         border: 1px solid #555;

         box-shadow: 0 0 3px #aaa;

         padding-right: 70px;

         border-color: #b03535;

     }

     /*border-color*/

     #myForm input:required,#myForm textarea:required{

         box-shadow: 0 0 5px #5cd053;

         border-color: #28921f;

     }

     #myForm input:focus,#myForm textarea:focus {border-color: #b03535;box-shadow: 0 0 5px #d45252;}

     /****button*****/

     button.submit {

         margin-left:155px;

         background-color: #68b12f;

         background: -webkit-gradient(linear, left top, left bottom, from(#68b12f), to(#50911e));

         background: -webkit-linear-gradient(top, #68b12f, #50911e);

         background: -moz-linear-gradient(top, #68b12f, #50911e);

         background: -ms-linear-gradient(top, #68b12f, #50911e);

         background: -o-linear-gradient(top, #68b12f, #50911e);

         background: linear-gradient(top, #68b12f, #50911e);

         border: 1px solid #509111;

         border-bottom: 1px solid #5b992b;

         border-radius: 3px;

         -webkit-border-radius: 3px;

         -moz-border-radius: 3px;

         -ms-border-radius: 3px;

         -o-border-radius: 3px;

         box-shadow: inset 0 1px 0 0 #9fd574;

         -webkit-box-shadow: 0 1px 0 0 #9fd574 inset;

         -moz-box-shadow: 0 1px 0 0 #9fd574 inset;

         -ms-box-shadow: 0 1px 0 0 #9fd574 inset;

         -o-box-shadow: 0 1px 0 0 #9fd574 inset;

         color: white;

         font-weight: bold;

         padding: 6px 20px;

         text-align: center;

         text-shadow: 0 -1px 0 #396715;

     }

     button.submit:hover {

         opacity: 0.85;

         cursor: pointer;

     }

     button.submit:active {

         border: 1px solid #20911e;

         box-shadow: 0 0 10px 5px #356b0b inset;

         -webkit-box-shadow: 0 0 10px 5px #356b0b inset;

         -moz-box-shadow: 0 0 10px 5px #356b0b inset;

         -ms-box-shadow: 0 0 10px 5px #356b0b inset;

         -o-box-shadow: 0 0 10px 5px #356b0b inset;

     }

   </style>

  </head>

  <body>

     <form id="myForm" action="#" method="post" name="myForm">

         <ul>

             <li>

                 <h2>用户注册</h2>

                 <span id="Tips">*必须认真填写*</span>

             </li>

             <li>

                 <label for="name">用户名:</label>

                 <input type="text" placeholder="Super_walker" required>

             </li>

             <li>

                 <label for="password">密码:</label>

                 <input type="password" placeholder="bluehawk***" required>

                 <span id="Notes">请输入用户密码！</span>

             </li>

             <li>

                 <label for="email">邮箱:</label>

                 <input type="text" placeholder="[email protected]" required>

                 <span id="Notes">例如： "[email protected]"</span>

             </li>

             <li>

                 <label for="website">个人网站:</label>

                 <input type="url" placeholder="http://www.cnblogs.com/-walker/" pattern="(http|https)://.+" required>

                 <span id="Notes">例如： "http://someaddress.com"</span>

             </li>

             <li>

                 <label for="message">个人信息:</label>

                 <textarea name="message" cols="40" rows="6" required></textarea>

             </li>

             <li>

                 <button class="submit" type="submit">注册</button>

             </li>

         </ul>

     </form>

  </body>

 </html>
<!doctype html>HTML5&CSS3经典动态表格
用户注册
*必须认真填写*
用户名:
密码: 请输入用户密码！
邮箱: 例如： "[email protected]"
个人网站: 例如： "http://someaddress.com"
个人信息:
注册