星球动态html,HTML5&CSS3经典动态表格，html5教程

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