前端项目课程5 登录界面如何做
生活随笔
收集整理的這篇文章主要介紹了
前端项目课程5 登录界面如何做
小編覺得挺不錯的,現(xiàn)在分享給大家,幫大家做個參考.
前端項(xiàng)目課程5 登錄界面如何做
一、總結(jié)
一句話總結(jié)：找到好看的登錄界面，然后模仿，再根據(jù)自己的需要加入自己的元素即可。
?
1、如何讓塊標(biāo)簽里面的行標(biāo)簽居中？
在塊標(biāo)簽上面加 text-align:center;
23 .panel-title{ 24 text-align: center; 25 }?
43 <div class="panel-title"> 44 <img src="../public/img/logo.png" alt=""> 45 </div>?
2、登錄框一般用什么做？
panel面板
41 <div class="panel panel-primary login"> 42 <div class="panel-heading"> 43 <div class="panel-title"> 44 <img src="../public/img/logo.png" alt=""> 45 </div> 46 </div> 47 <div class="panel-body"> 48 <form action="index.html" method='post'> 49 <div class="form-group"> 50 <div class="input-group input-group-lg"> 51 <span class="input-group-addon"> 52 <span class='glyphicon glyphicon-user'></span> 53 </span> 54 <input type="text" class='form-control' placeholder='用戶名'> 55 </div> 56 </div> 57 <div class="form-group"> 58 <div class="input-group input-group-lg"> 59 <span class="input-group-addon"> 60 <span class='glyphicon glyphicon-lock'></span> 61 </span> 62 <input type="password" class='form-control' placeholder='密碼'> 63 </div> 64 </div> 65 <div class="form-group ok"> 66 <input type="submit" value="登錄" class='btn btn-primary btn-lg'> 67 </div> 68 </form> 69 </div> 70 </div>?
3、如何獲取網(wǎng)站background的url鏈接里面的圖片？
點(diǎn)到右鍵，鏈接，有個open in new tab，這里顯示的是相對路徑，但是相對路徑會在web訪問的時候變
成絕對路徑
?
4、界面快速高效效果好的設(shè)計(jì)思路是什么？
模仿，找到好的案例，找到好看的登錄界面，然后模仿，再根據(jù)自己的需要加入自己的元素即可。
?
5、酒仙網(wǎng)的body的背景色是什么？
#f9f9f9
?
?
二、登錄界面如何做
1、截圖
?
2、代碼
1 <!doctype html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>酒仙網(wǎng)后臺</title> 6 <style> 7 *{ 8 font-family: 微軟雅黑; 9 } 10 11 .login{ 12 width:500px; 13 height:300px; 14 background: #ccc; 15 position: absolute; 16 top:50%; 17 left:50%; 18 margin-left:-250px; 19 margin-top:-150px; 20 border-radius:20px; 21 } 22 23 .panel-title{ 24 text-align: center; 25 } 26 27 .ok{ 28 text-align: center; 29 } 30 31 form{ 32 margin-top:10px; 33 } 34 </style> 35 <link rel="stylesheet" href="../public/bs/css/bootstrap.min.css"> 36 <script src="../public/js/jquery.min.js"></script> 37 <script src="../public/bs/js/bootstrap.min.js"></script> 38 <script src='../public/js/jquery.toggle.js'></script> 39 </head> 40 <body> 41 <div class="panel panel-primary login"> 42 <div class="panel-heading"> 43 <div class="panel-title"> 44 <img src="../public/img/logo.png" alt=""> 45 </div> 46 </div> 47 <div class="panel-body"> 48 <form action="index.html" method='post'> 49 <div class="form-group"> 50 <div class="input-group input-group-lg"> 51 <span class="input-group-addon"> 52 <span class='glyphicon glyphicon-user'></span> 53 </span> 54 <input type="text" class='form-control' placeholder='用戶名'> 55 </div> 56 </div> 57 <div class="form-group"> 58 <div class="input-group input-group-lg"> 59 <span class="input-group-addon"> 60 <span class='glyphicon glyphicon-lock'></span> 61 </span> 62 <input type="password" class='form-control' placeholder='密碼'> 63 </div> 64 </div> 65 <div class="form-group ok"> 66 <input type="submit" value="登錄" class='btn btn-primary btn-lg'> 67 </div> 68 </form> 69 </div> 70 </div> 71 </body> 72 </html>?
?
?
轉(zhuǎn)載于:https://www.cnblogs.com/Renyi-Fan/p/9287889.html
總結(jié)
以上是生活随笔為你收集整理的前端项目课程5 登录界面如何做的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： python reduce函数 day1
- 下一篇： 2017年html5行业报告,云适配发布