1
2
3
4
5
6
7
8
9
HTML5&CSS3经典动态表格10
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
105
106
107
108
109
110
用户注册
111 *必须认真填写*
112
113
114 用户名:
115
116
117
118 密码:
119
120 请输入用户密码!
121
122
123 邮箱:
124
125 例如: "name@something.com"
126
127
128 个人网站:
129
130 例如: "http://someaddress.com"
131
132
133 个人信息:
134
135
136
137 注册
138
139
140
141
142