溫馨提示×

溫馨提示×

您好,登錄后才能下訂單哦!

密碼登錄×
登錄注冊×
其他方式登錄
點擊 登錄注冊 即表示同意《億速云用戶服務條款》

html表單實例:登錄頁面

發(fā)布時間:2020-06-23 03:32:12 來源:網(wǎng)絡 閱讀:932 作者:yuxin1234567890 欄目:網(wǎng)絡安全

1 <!DOCTYPE html>

2 <html>

3 <head>

4     <meta charset="utf-8">

5     <title>登錄頁面</title>

6     <style>

7          body{

8           margin: 0px;

9           padding: 0px;

10}

11       #div-big{

12           width: 1100px;

13           height: 600px;

14           background-p_w_picpath: 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                                         容器內(nèi)*/

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;   /*設置或檢索對象邊框?qū)挾龋憾x比默認厚度粗 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        </style>

126         </head>

127         <body>

128            <div id="div-big">

129                <div id="register">

130                    用戶登錄

131                </div>

132                <div id="name">

133                    <form method="post" action="">

134                        <input id="name-input" type="text" name="nick" value=""   135                               placeholder="請輸入用戶名">

136                    </form>

137                </div>

138                <div id="e-mail">

139                    <form method="post" action="">

140                        <input id="e-mail-input" type="text" name="e-mail"       141                                value="" placeholder="請輸入郵箱">

142                    </form>

143                </div>

144                <div id="password">

145                    <form method="post" action="">

146                        <input id="password-input" type="text" name="password"   

147                                  value="" placeholder="請輸入密碼">

148                    </form>

149                </div>

150                <div id="submit">

151                    <form method="post" action="">

152                        <input id="submit-input" type="submit" name="submit"     

153                                value="登錄" >

154                    </form>

155                </div>

156        </div>

157 </body>

158 </html>

html表單實例:登錄頁面


向AI問一下細節(jié)
推薦閱讀:
  1. HTML表單
  2. HTML登錄頁面

免責聲明:本站發(fā)布的內(nèi)容(圖片、視頻和文字)以原創(chuàng)、轉(zhuǎn)載和分享為主,文章觀點不代表本網(wǎng)站立場,如果涉及侵權請聯(lián)系站長郵箱:is@yisu.com進行舉報,并提供相關證據(jù),一經(jīng)查實,將立刻刪除涉嫌侵權內(nèi)容。

AI