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

转载于:https://www.cnblogs.com/Renyi-Fan/p/9287889.html

前端项目课程5 登录界面如何做相关推荐

  1. 前端项目课程6 做酒仙网顶部注意事项有哪些

    前端项目课程6 做酒仙网顶部注意事项有哪些 一.总结 一句话总结: 1.css样式代码搁在那? 先搁在本页面,后面很多的时候在一次剪过去 2.如何给页面部分的什么ceo邮箱.社区.电话等字体变成红色? ...

  2. 前端项目课程7 banner设计注意事项

    前端项目课程7 banner设计注意事项 一.总结 一句话总结: 1.每个部分的里面的部分可以用相同的名字么,如何修改样式呢? 可以, 用模块名 + 比如上中下(top middle bottom) ...

  3. 【高校宿舍管理系统】第四章 创建前端项目以及完成登录页面

    第四章 创建前端项目以及完成登录页面 提示:本博客个为人独立博客,不是权威,仅供参考!所有思路只做交流之用!如有不足之处,望各位在评论区友善指正. 文章目录 第四章 创建前端项目以及完成登录页面 前言 ...

  4. 前端项目课程3 jquery1.8.3到1.11.1有了哪些新改变

    web项目课程3  jquery1.8.3到1.11.1有了哪些新改变 一.总结 一句话总结:领会官方升级的意思.  1.live();    2.die();    3.bind();    4.u ...

  5. vue前端架构文档_Dubbo分布式架构搭建教育PC站-Vue前端：课程和登录页

    srcouterindex.js import Vue from 'vue'import VueRouter from 'vue-router'import Vuex from 'vuex'impor ...

  6. web项目通用简易登录界面

    效果展示 代码 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <t ...

  7. 用MFC做漂亮界面之登录界面

    转自:https://blog.csdn.net/u011711997/article/details/79375710 前段时间由于工作原因,一直没有更新博客,今天,继续讲解如何用MFC做漂亮界面, ...

  8. 【HTML作业】HTML登录界面

    1.引言 设计结课作业,课程设计无处下手,网页要求的总数量太多?没有合适的模板?数据库,java,python,vue,html作业复杂工程量过大?毕设毫无头绪等等一系列问题.你想要解决的问题,在微信 ...

  9. Swing学习----------QQ登录界面制作(一)

    素材获取可关注微信公众号:开源IT,后台回复 "素材" 免费获取. 最近学习的课程有点紧,所以暂时放下了SSH的学习,等时间稍微松点再开始SSH博客的跟进.在这个学期的JAVA课程 ...

最新文章

  1. 图神经网络从入门到入门
  2. Matlab读取txt文本并且绘制曲线
  3. C 将长型整数转换为字符串
  4. hal库选择滴答时钟函数_STM32入门 ： HAL库、标准外设库、LL库
  5. mysql增删查操作
  6. 算法--微软面试：整数的二进制表示中1的个数（Java实现）
  7. java填空题答案_JAVA求填空题答案
  8. 推荐25个非常优秀的网页表单设计案例
  9. 针对某游戏保护DebugPort清零的一次逆向
  10. ElasticSearch常用命令记录
  11. python二分法查找时间点_python有序查找算法：二分法
  12. Java终止线程的三种方式
  13. LeetCode（693）——交替位二进制数（JavaScript）
  14. （待补充）【n个骰子的点数】剑指offer——面试题43：n个骰子的点数
  15. 2020年阿里巴巴投资者大会集团CEO张勇演讲实录
  16. html 视频类插件,科技常识：HTML5视频播放插件 video.js介绍
  17. golang base64解码碰到的坑
  18. 其实就是为了能有字幕特效，用MeGUI + AVS压制PSP MP4AVC视频02 - 安装准备篇
  19. 99%的人都不知道的减肥小秘密，你必须知道
  20. matlab如何求照度,基于Matlab GUI的照度测量仿真平台

热门文章

  1. 未指定发送trap的源接口_组播之RPF接口检测
  2. java消息 框架_java 框架-消息队列ActiveMQ
  3. mysql 安装软件无法启动不了_Mysql 安装服务无法启动解决方案与使用的一般使用指令...
  4. 查看进程状态信息命令 jps - （Java Virtual Machine Process Status Tool）
  5. nas php.ini,php.ini 配置文件常用详解
  6. 计算机系统通过执行通道程序完成数据,批量数据传送
  7. oracle 5种索引方式,MySQL使用索引的几种方式
  8. nginx upstream配置_Prometheus快速监控Nginx
  9. tensorflow图像分割unet_AAAI2020 | 医学图像分割的Nonlocal UNets
  10. java bidi_Java Bidi createLineBidi()用法及代码示例