你的位置:首页 > 网页设计

[网页设计]HTML5CSS3经典动态表格


 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"