登录页面登录框居中
程序员文章站
2022-05-25 18:27:39
头部... 内容内容内容内容内容内容 底部。。。 .HolyGrail { display: flex; min-height: 100vh; flex-direction: column; } header, footer { height:80px; line-height: 80px; tex... ......
<section class="holygrail"> <header>头部...</header> <div class="holygrail-body" style="background:url('static/images/back.jpg') no-repeat center center; background-size:100% 100%;"> <div>内容内容内容内容内容内容</div> </div> <footer>底部。。。</footer> </section>
.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; } }
上一篇: vue项目中获取cdn域名插件
下一篇: 那是我小时候