垂直居中——登录界面

弹性盒子垂直居中:body直接display:flex不行中间在来一层。

 1 <!DOCTYPE html>
 2 <html>
 3 <head>
 4 <meta charset="utf-8">
 5 <link rel="stylesheet" href="https://cdn.static.runoob.com/libs/bootstrap/3.3.7/css/bootstrap.min.css"> 
 6 <script src="https://cdn.static.runoob.com/libs/jquery/1.10.2/jquery.min.js">
 7 </script>
 8 <script src="https://cdn.static.runoob.com/libs/bootstrap/3.3.7/js/bootstrap.min.js"></script>
 9 <style>
10     body{
11     background: url(back01.jpg) center center no-repeat;
12     background-attachment: fixed;
13     background-size: 100% 100%;
14     background-color: pink;
15     }
16     .full-screen{
17      position: absolute;
18      /*background:#ff2;*/
19      width:100%;
20      height:100%;
21      display: flex;
22      justify-content: center;
23      align-items: center; 
24     }
25     .pc-center{
26     background: url(loginwin.png) center center no-repeat;
27     background-size: 100% 100%; 
28     width: 593px;
29     height: 490px;
30     /*width: 764px;
31     height: 631px;*/
32     /*margin: 0 auto;
33     margin-top: 192px;*/
34     padding: 50px
35     }
36     h2{
37     color: #fff;
38     text-align: center;
39     margin-bottom: 39px;
40     font-size: 27px;
41     }
42     .control-label{
43         color: #fff;
44     }
45 </style>
46 
47 </head>
48 <body>
49 <div class="full-screen">
50 <div class="pc-center">
51     <div class="warp-center">
52         <h2>雅培经销商订单录入系统</h2>
53         <form class="form-horizontal" role="form">
54             <div class="form-group">
55                 <label for="firstname" class="col-sm-2 control-label">用户名</label>
56                 <div class="col-sm-8">
57                     <input type="text" class="form-control" id="firstname" placeholder="请输入名字">
58                 </div>
59             </div>
60             <div class="form-group">
61                 <label for="lastname" class="col-sm-2 control-label">密码</label>
62                 <div class="col-sm-8">
63                     <input type="text" class="form-control" id="lastname" placeholder="请输入姓">
64                 </div>
65             </div>
66         </form>
67     </div>
68     <div class="logo"></div>
69 </div>
70 </div>
71 </body>
72 </html>

display: -webkit-box;
display: -webkit-flex;
display: -moz-box;
display: -moz-flex;
display: -ms-flexbox;
display: flex;
-webkit-justify-content:center;
justify-content: center;
-webkit-align-items:center;
align-items:center;

转载于:https://www.cnblogs.com/dlgood/p/6626468.html

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/488778.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

html的组织顺序是什么,css如何组织?

css如何组织&#xff1f;下面本篇文章给大家介绍一下。有一定的参考价值&#xff0c;有需要的朋友可以参考一下&#xff0c;希望对大家有所帮助。前端工程师在开发一个单页面或者小网站的时候有可能不会在意CSS的组织问题&#xff0c;但如果要开发一个中大型的网站&#xff0c;…

北航、旷视联合,打造最强实时语义分割网络

来源&#xff1a;AI科技评论编辑&#xff1a;Camel导语&#xff1a;MSFNet在Cityscapes测试集上达到77.1%mIoU/41FPS&#xff08;注意是1024*2048&#xff09;&#xff0c;在Camvid测试集上达到75.4 mIoU/97FPS&#xff0c;是目前最强的实时语义分割网络。下面要介绍的论文由北…

oracle text类型_数据库的一些注入技巧Oracle

默认数据库SYSTEMSYSAUX注释--SELECT * FROM Users WHERE username OR11 -- AND password ;查询版本信息SELECT banner FROM v$version WHERE banner LIKE Oracle%;SELECT banner FROM v$version WHERE banner LIKE TNS%;SELECT version FROM v$instance;数据库凭证SELECT u…

Java 装箱和拆箱

转载于:https://www.cnblogs.com/jiangxifanzhouyudu/p/6629165.html

中科院计算所关于“木兰”语言问题处理情况说明

来源&#xff1a;中国科学院计算技术研究所 近日&#xff0c;网上出现质疑“木兰”语言的信息。我所获知这一情况后高度重视。经所科研道德委员会初步调查&#xff0c;“木兰”语言系我所员工刘雷创办的中科智芯公司研发的面向青少年编程教育的集成化产品&#xff0c;该产品的开…

用python表白代码_如何用Python代码向心爱的姑娘花式表白?

刚好之前用turtle 写过一个https://www.zhihu.com/video/1058809172984004608 这是我当时自学python第二天写的一个&#xff0c;书上讲到了一个turtle模块&#xff0c;可以用来画一些简单的图&#xff0c;自己突发奇想就在纸上大概设计了一下图形&#xff0c;算了算长度后&…

CSS3 Flex布局(伸缩布局盒模型)学习

CSS3 Flex布局&#xff08;伸缩布局盒模型&#xff09;学习 转自&#xff1a;http://www.xifengxx.com/web-front-end/1408.html CSS2定义了四种布局&#xff1a;块布局、行内布局、表格布局盒定位布局。 CSS3引入了一种新的布局模式——Flexbox布局&#xff0c;即伸缩布局盒&a…

qtablewidget添加item不显示_企业微信聊天工具栏可以添加哪些应用?企业微信聊天工具栏不显示是什么原因?...

使用企业微信营销的朋友们应该都知道&#xff0c;企业微信有聊天侧边栏&#xff0c;我们可以在里面添加常用应用&#xff0c;提升运营效率&#xff0c;但是有很多用户反映&#xff0c;自己的企业微信中没有聊天工具栏&#xff0c;这是什么原因呢&#xff1f;这时可能有以下两种…

5G将如何推动未来十年智能城市的发展

来源&#xff1a; IEEE电气电子工程师过去十年的结束标志着部署5G的技术军备竞赛。移动运营商竞相安装网络基础设施&#xff0c;在澳大利亚、中国、韩国、瑞士和美国等数十个国家提供每秒超过1千兆的无线连接。但是&#xff0c;为什么这么匆忙&#xff1f;在2019年的IEEE GLOBE…

接口自动化- 基于 Python

准备工作 这部分其实在谷歌或者百度上搜索下就可以完成的&#xff0c;可是我就是想再啰嗦一遍&#xff0c;说不定有比我更懒的同学呢哈哈~ 第一步 Python的安装配置 打开官网: https://www.python.org/downloads/ 目前官网上已经更新到3.6.1啦&#xff08;这更新速度我是服的&…

vscode c++ 快捷键_[工具篇]提高开发幸福度的VSCode配置[更新中...]

工欲善其事&#xff0c;必先利其器。基于上文把keil与外部编辑器vscode结合一起&#xff0c;达到keil作为编译与调试工具&#xff0c;而vscode作为编辑工具&#xff0c;如今其插件之丰富能与vim媲美&#xff0c;所以现在本文主要介绍本人对VSCode的一些个性配置&#xff0c;以便…

【平行驾驶】王飞跃 | 人工智能与智能汽车:在CPSS中驶向第三轴心时代

来源&#xff1a;车百智库【导读】1月10-12日&#xff0c;2020中国电动汽车百人会论坛在钓鱼台国宾馆隆重召开。青岛智能产业技术研究院院长王飞跃教授受邀出席并作精彩报告&#xff0c;讲述了平行驾驶理论及其当前的矿山无人化应用。王飞跃教授表示&#xff0c;平行驾驶是一种…

poj 3485 区间选点

题目链接&#xff1a;http://poj.org/problem?id3485 题意&#xff1a;X轴上公路从0到L&#xff0c;X轴上下有一些点给出坐标代表村庄&#xff0c;问在公路上最少建几个出口才能使每个村庄到出口的距离不超过D。 以村庄为圆心&#xff0c;半径为 d 画圆&#xff0c;与公路相交…

python return函数_Python函数(一)-return返回值

定义一个函数可以在最后加上return返回值&#xff0c;方便查看函数是否运行完成和返回函数的值 # -*- coding:utf-8 -*- __author__ "MuT6 Sch01aR" def test(): print(test) def test1(): print(test1) return 8 def test2(): print("test2") return 4,t…

吉林大学计算机英语成绩,吉林大学复试出结果,初试分差84分,复试成绩却相差无几!...

原标题&#xff1a;吉林大学复试出结果&#xff0c;初试分差84分&#xff0c;复试成绩却相差无几&#xff01;2021届考研的同学有不少同学已经完成复试&#xff0c;但也有一部分同学还正在忙着准备复试科目&#xff0c;各大高校近期也纷纷发布出了2021年研究生复试的相关工作安…

势如破竹!169 篇论文带你看 BERT 在 NLP 中的 2019 年!

来源&#xff1a; AI科技评论 编译 | JocelynWang编辑 | 丛末2019 年&#xff0c;可谓是 NLP 发展历程中具有里程碑意义的一年&#xff0c;而其背后的最大功臣当属 BERT &#xff01;2018 年底才发布&#xff0c;BERT 仅用 2019 年一年的时间&#xff0c;便以「势如破竹」的姿…

linux运行nodejs一般路径_NodeJS和命令行程序

奇技指南本文来自奇舞周刊公众号&#xff0c;转载请注明出处。作者&#xff1a;刘观宇&#xff0c;360 奇舞团高级前端工程师、技术经理&#xff0c;W3C CSS 工作组成员。源 起植根于Unix系统环境下的程序&#xff0c;很多都把贯彻Unix系统设计的哲学作为一种追求。Unix系统管道…

计算机怎么允许用户安装文件,如何禁止安装某个软件?电脑不允许安装软件的方法...

如何禁止安装某个软件&#xff1f;想要禁止安装软件&#xff0c;可以在组策略中直接启用软件安装规则&#xff0c;但如果只是想要禁用某个软件的安装&#xff0c;则需要用户将该软件的证书进行一个限制&#xff0c;证书不通过&#xff0c;自然无法安装&#xff0c;下面是操作步…

Docker日志收集最佳实践

传统日志处理 说到日志&#xff0c;我们以前处理日志的方式如下&#xff1a; 日志写到本机磁盘上 通常仅用于排查线上问题&#xff0c;很少用于数据分析 需要时登录到机器上&#xff0c;用grep、awk等工具分析 那么&#xff0c;这种方式有什么缺点呢&#xff1f; 第一&#x…

2020年10个诱人的技术里程碑

来源&#xff1a;IEEE电气电子工程师心理控制仿生四肢将首次亮相波士顿马拉松麻省理工学院的研究人员已经开发出一种只用思想控制仿生肢体的方法。2016年首次在人类身上试验。2020年&#xff0c;当在阿富汗失去腿的老兵Brandon Korona用他的新仿生肢参加波士顿马拉松比赛时&…