首页 > 代码库 > html表单实例：登录页面
html表单实例：登录页面
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-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 </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="http://www.mamicode.com/登录" >
154 </form>
155 </div>
156 </div>
157 </body>
158 </html>
本文出自 “12145704” 博客，请务必保留此出处http://12155704.blog.51cto.com/12145704/1863425
html表单实例：登录页面