Html制作简单而漂亮的登录页面

最新推荐文章于 2024-04-28 15:34:18 发布

dielucuan8830

最新推荐文章于 2024-04-28 15:34:18 发布

阅读量679

点赞数

原文链接：http://www.cnblogs.com/UniqueColor/p/6641299.html

版权

先来看看样子。

html源码：

 1 <!DOCTYPE html>  
 2 <html lang="en">  
 3 <head>  
 4     <meta charset="UTF-8">  
 5     <title>Login</title>  
 6     <link rel="stylesheet" type="text/css" href="Login.css"/>  
 7 </head>  
 8 <body>  
 9     <div id="login">  
10         <h1>Login</h1>  
11         <form method="post">  
12             <input type="text" required="required" placeholder="用户名" name="u"></input>  
13             <input type="password" required="required" placeholder="密码" name="p"></input>  
14             <button class="but" type="submit">登录</button>  
15         </form>  
16     </div>  
17 </body>  
18 </html>

css代码：

 1 html{   
 2     width: 100%;   
 3     height: 100%;   
 4     overflow: hidden;   
 5     font-style: sans-serif;   
 6 }   
 7 body{   
 8     width: 100%;   
 9     height: 100%;   
10     font-family: 'Open Sans',sans-serif;   
11     margin: 0;   
12     background-color: #4A374A;   
13 }   
14 #login{   
15     position: absolute;   
16     top: 50%;   
17     left:50%;   
18     margin: -150px 0 0 -150px;   
19     width: 300px;   
20     height: 300px;   
21 }   
22 #login h1{   
23     color: #fff;   
24     text-shadow:0 0 10px;   
25     letter-spacing: 1px;   
26     text-align: center;   
27 }   
28 h1{   
29     font-size: 2em;   
30     margin: 0.67em 0;   
31 }   
32 input{   
33     width: 278px;   
34     height: 18px;   
35     margin-bottom: 10px;   
36     outline: none;   
37     padding: 10px;   
38     font-size: 13px;   
39     color: #fff;   
40     text-shadow:1px 1px 1px;   
41     border-top: 1px solid #312E3D;   
42     border-left: 1px solid #312E3D;   
43     border-right: 1px solid #312E3D;   
44     border-bottom: 1px solid #56536A;   
45     border-radius: 4px;   
46     background-color: #2D2D3F;   
47 }   
48 .but{   
49     width: 300px;   
50     min-height: 20px;   
51     display: block;   
52     background-color: #4a77d4;   
53     border: 1px solid #3762bc;   
54     color: #fff;   
55     padding: 9px 14px;   
56     font-size: 15px;   
57     line-height: normal;   
58     border-radius: 5px;   
59     margin: 0;   
60 }

转载于:https://www.cnblogs.com/UniqueColor/p/6641299.html

dielucuan8830

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
Html制作简单而漂亮的登录页面

先来看看样子。html源码： 1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Login</title> 6 <l...
复制链接

扫一扫