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 }
