前端项目课程5 登录界面如何做
一、总结
一句话总结：找到好看的登录界面，然后模仿，再根据自己的需要加入自己的元素即可。
1、如何让块标签里面的行标签居中？
在块标签上面加 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、如何获取网站background的url链接里面的图片？
点到右键，链接，有个open in new tab，这里显示的是相对路径，但是相对路径会在web访问的时候变
成绝对路径
4、界面快速高效效果好的设计思路是什么？
模仿，找到好的案例，找到好看的登录界面，然后模仿，再根据自己的需要加入自己的元素即可。
5、酒仙网的body的背景色是什么？
#f9f9f9
二、登录界面如何做
1、截图
2、代码
1 <!doctype html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>酒仙网后台</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>