html表单登录页面6,html表单实例：登录页面

1

2

3

4     

5     

登录页面

6    

7          body{

8           margin: 0px;

9           padding: 0px;

10}

11       #div-big{

12           width: 1100px;

13           height: 600px;

14           background-image: url(./1.jpg);

15

16          /*background-repeat:设置或检索对象的背景图像如何铺排填充*/

17            background-repeat:round;  /*round:背景图像自动缩放直到适应且填充满整个容

18                                        器* /

19

20          /*background-position：设置或检索对象的背景图像位置*/

21            background-position:center;  /*center:背景图像横向和纵向居中*/

22

23           /*background-size:检索或设置对象的背景图像的尺寸大小*/

24            background-size: contain;   /*contain:将背景图像等比缩放到宽度或高度与容

25                                         器的宽度或高度相等，背景图像始终被包含在

26                                         容器内*/

27

28           /*opacity:检索或设置对象的不透明度*/

29             opacity: .5;   /*.5:不透明度为50%*/

30             margin: 0 auto;

31        }

32        #register{

33            width: 500px;

34            height: 100px;

35            margin: 0 auto;

36            text-align: center;   /*文字左右居中*/

37            line-height: 120px;   /*文字垂直居中*/

38            font-weight: bolder;   /*文字粗细：比粗体更粗*/

39            font-size: 60px;       /*文字大小*/

40            color: #ff0000;       /*文字颜色：红色*/

41            font-family:SimHei ;   /*文字样式：黑体*/

42        }

43        #name{

44            width: 400px;

45            height: 60px;

46            margin: 0 auto;

47            font-size: 20px;

48            text-align: center;

49            line-height: 60px;

50            margin-top: 30px;

51            margin-bottom: 30px;

52

53        }

54        #name-input{

55            width: 400px;

56            height: 60px;

57            margin: 0 auto;

58            font-size: 40px;

59            line-height: 60px;

60            font-family:"SimHei";

61            border-width: thick;   /*设置或检索对象边框宽度：定义比默认厚度粗 62                                               的边框。计算值为5px */

63            border-style: dashed;   /*设置或检索对象边框样式：虚线轮廓 */

64            border-color: red;      /*设置或检索对象边框颜色：红色 */

65            border-bottom-style: solid; /*设置或检索对象底边样式：实线轮廓 */

66            border-bottom-width: 7px;   /*设置或检索对象底边宽度*/

67            border-top-right-radius: 10px;   /*设置或检索对象右上角圆角边框*/

68            border-top-left-radius: 10px;   /*设置或检索对象左上角圆角边框 */

69            border-left-style:outset; /*设置或检索对象左边样式：3D凸边轮廓*/

70            border-right-style:inset;/*设置或检索对象右边样式：3D凹边轮廓 */

71        }

72        #e-mail{

73            width: 400px;

74            height: 60px;

75            margin: 0 auto;

76            margin-top: 30px;

77            margin-bottom: 30px;

78        }

79        #e-mail-input{

80            width: 400px;

81            height: 40px;

82            margin: 0 auto;

83            font-size: 30px;

84            line-height: 40px;

85            font-family: arial;

86            margin-top: 10px;

87        }

88        #password{

89            width: 400px;

90            height: 60px;

91            margin: 0 auto;

92            margin-top: 30px;

93            margin-bottom: 30px;

94        }

95        #password-input{

96            width: 400px;

97            height: 40px;

98            margin: 0 auto;

99            font-size: 30px;

100           line-height: 40px;

101           font-family: arial;

102           margin-top: 8px;

103}

104        #submit{

105           width: 400px;

106           height: 60px;

107           margin: 0 auto;

108           margin-top: 40px;

109           margin-bottom: 30px;

110        }

112        #submit-input{

113           width: 100px;

114           height: 40px;

115           margin: 0 auto;

116           font-size: 25px;

117           line-height: 40px;

118           font-family:"黑体";

119           text-align: center;

120           float: right;

121           margin-right:150px;

123           margin-top: 10px;

124        }

125        

126         

127         

128            

129                

130                    用户登录

131                

132                

133                    

134                        

136                    

137                

138                

139                    

140                        

142                    

143                

144                

145                    

146                        

147                                  value="" placeholder="请输入密码">

148                    

149                

150                

151                    

152                        

153                                value="登录" >

154                    

155                

156        

157

158