runsly 技术分享 2021-10-22

html+css—纯手写登录框

界面展示

login.html

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <meta name="viewport" content="width=device-width, initial-scale=1.0">
 6     <title>登陆</title>
 7     <link rel="stylesheet" href="login.css">
 8     <link rel="stylesheet"  href="css/font-awesome.css">
 9 </head>
10 <body>
11     <div id="login-box">
12         <h1>登陆</h1>
13         <div class="form">
14             <div class="item">
15                 <i class="fa fa-user-circle-o" aria-hidden="true"></i>
16                 <input type="text"  placeholder="username" >
17             </div>
18             <div class="item">
19                 <i class="fa fa-key" aria-hidden="true"></i>
20                 <input type="text"  placeholder="password" >
21             </div>
22         </div>
23         <button>登陆</button>
24     </div>
25 </body>
26 </html>

注：用户名图标和密码图标是在Font Awesome 官网上下载的，是一款基于css框架的网页字体图标库（网址：http://www.fontawesome.com.cn/）。我下载的是旧版本，压缩之后将css和fonts文件复制到自己项目中。然后在head头部中引入font-awesome.css：<link rel=”stylesheet” href=”css/font-awesome.min.css”>。最后在该官网选择合适的图标即可。

login.css

 1 body {
 2     background: url(\'img/u=1583668540\,1925901939&fm=26&gp=0.jpg\');
 3     /* 背景不重复 */
 4     background-repeat: no-repeat;
 5     /* 让背景充满整个屏幕 */
 6     background-size: 100% auto;
 7 
 8 }
 9 #login-box {
10     width: 350px;
11     height: 220px;
12     border:1px solid #000;
13     margin: 0 auto;
14     margin-top: 15%;
15     text-align: center;/* 内容居中*/
16     background: #00000070;
17 }
18 
19 #login-box h1 {
20     color:#fff;
21 }
22 
23 /* #login-box .form {
24     margin-top: 15px;  
25 } */
26 
27 #login-box .form .item{
28     margin-top:15px;
29 }
30 #login-box .form .item i{
31     color:#fff;
32 }
33 
34 #login-box .form .item input {
35     border: 0;
36     width: 150px;
37     /* 字体大小 */
38     font-size: 18px;
39     /* 下边框 */
40     border-bottom: 2px solid #fff;
41     /* 内边距 */
42     padding: 5px 10px;
43     background: #ffffff00;
44     /* 字体颜色 */
45     color:#fff;
46 }
47 
48 #login-box button{
49     margin-top: 10px;
50     width: 130px;
51     border: 0;
52     font-size: 700;
53     background-image: linear-gradient(to right, #ad3125 0%, #578bc3 100%);
54     /* 设置登陆按钮为圆形 */
55     border-radius: 15px;
56 }