- 界面展示
- 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 }