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经典动态表格