您好,登錄后才能下訂單哦!
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 容器內*/
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 </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>
免責聲明:本站發布的內容(圖片、視頻和文字)以原創、轉載和分享為主,文章觀點不代表本網站立場,如果涉及侵權請聯系站長郵箱:is@yisu.com進行舉報,并提供相關證據,一經查實,將立刻刪除涉嫌侵權內容。