登录页面登录框居中

番茄西红柿发布于2019-04-23 11:44 / 3507人阅读

</>复制代码 
头部...
<div color:="" #000000"="">background:url(static/images/back.jpg) no-repeat center center;
  background-size:100% 100%;">内容内容内容内容内容内容
底部。。。

</>复制代码 
.HolyGrail {
  display: flex;
  min-height: 100vh;
  flex-direction: column;
}
header, footer {
  height:80px;
  line-height: 80px;
  text-align:center;
  background-color:#000;
  color:#fff;
}
.HolyGrail-body {
  display: flex;
  flex: 1;
  align-items: center;
}
.HolyGrail-body div{
  padding:35px 40px;
  margin:auto;
  border-radius:6px;
  background-color:rgba(255,235,255,0.6);
}
@media (max-width: 768px) {
  .HolyGrail-body {
    flex-direction: column;flex: 1;
  }
  .HolyGrail-nav,
  .HolyGrail-ads,
  .HolyGrail-content {flex: auto;
  }
}

云服务器 GPU云服务器登录框邮箱登录框 html登录框样式登录框php手工注入

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/1072.html

这可能是实现登录框居中最简捷的方法

摘要：常见登录框很多情况下，网站的登录框，就像这样这样这样或者这样锤子科技总之，登录面板位于页面正中央，水平居中，竖直居中。并且随着浏览器窗口大小变化，始终居中方法一实现思路使用两个嵌套，外层的宽高设置为浏览器视窗大小，相对定位。常见登录框很多情况下，网站的登录框，就像这样 showImg(https://segmentfault.com/img/remote/1460000008644...

fai1017 2019-08-21 11:35 评论0 收藏0
这可能是实现登录框居中最简捷的方法

摘要：常见登录框很多情况下，网站的登录框，就像这样这样这样或者这样锤子科技总之，登录面板位于页面正中央，水平居中，竖直居中。并且随着浏览器窗口大小变化，始终居中方法一实现思路使用两个嵌套，外层的宽高设置为浏览器视窗大小，相对定位。常见登录框很多情况下，网站的登录框，就像这样 showImg(https://segmentfault.com/img/remote/1460000008644...

shery 2019-08-30 15:53 评论0 收藏0
【CSS练习】IT修真院--练习4-移动端界面

摘要：任务四一个最常见的移动端页面完成的事情完成简单布局，然后填充界面与效果图对比优化完成验收要求扩展性顶栏固定进行样式兼容性研究完成任务四深度思考跟随深度思考师兄建议进行修改输入栏左侧换用输入限制电话位，密码位根据结构的语义化修改尝试下再加一任务四、一个最常见的移动端页面完成的事情完成简单布局，然后填充界面与效果图对比优化完成验收要求：header扩展性 & 顶栏固定进行p...

kun_jian 2019-08-29 15:39 评论0 收藏0
flex布局滚动问题，子元素无法全部显示的解决办法

摘要：布局使用起来非常方便，对于水平垂直居中的需求，很容易就能实现。但是前不久，在做全屏弹窗遮罩登录的时候，遇到了布局滚动的一个问题，在此记录一下。关键就在于最低高度，如果不用最低高度的话，滚动时还是无法全部显示登录框。 flex布局使用起来非常方便，对于水平垂直居中的需求，很容易就能实现。但是前不久，在做全屏弹窗遮罩登录的时候，遇到了flex布局滚动的一个问题，在此记录一下。问题重现理...

Scliang 2019-08-29 15:33 评论0 收藏0