微信扫一扫打赏支持

前端项目课程5 登录界面如何做

前端项目课程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>

 

 

 

 
posted @ 2018-07-10 10:58  范仁义  阅读(1240)  评论(0)    收藏  举报