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"
posted @ 2015-11-22 13:57  逗伴不是瓣  阅读(1901)  评论(1编辑  收藏  举报