用Grid和Flex，十分钟快速制做登录网页

时间 2019-11-30

标签 grid flex 十分 10分快速制做登录网页栏目 Flex 繁體版

原文原文链接

全文共3787字，预计学习时长8分钟css

制做登录引导页的模板和教程很是少，并且大多数都过于复杂或是添加了太多设计（如多个页面和表格等），但多数状况下一些很是简洁的设计就足矣。

本文将介绍在不用老式CSS库（如 bootstrap）的状况下，如何以CSS（Grid和Flex）为主要工具建立响应式用户界面。html

那么就开始吧！git

本文所要构建引导页的基本布局主要聚焦于一些基础部件，以便读者本身制做引导页时能够直接从中找出并使用本身想用的部件。下方为成果图例：github

该网页主要有四个组成部分：导航栏、封面图像、卡片网格、以及页脚。

index.html的代码很是简单，主要包含div标签和总体的网页结构：bootstrap

<body>
  <nav class="zone bluesticky">
      <ulclass="main-nav">
          <li><ahref="">About</a></li>
          <li><ahref="">Products</a></li>
          <li><ahref="">Our Team</a></li>
          <liclass="push"><ahref="">Contact</a></li>
  </ul>
  </nav>
  <div>
   <imgsrc="img/cover.jpg">
 <divclass="coverText"><h1>Making the world a betterplace</h1></div>
  </div>
 <div class="zone bluegrid-wrapper">
      <div>
          <imgsrc="./img/teamplay.jpg">
          <divclass="text">
              <h1>Teamplay</h1>
              <p>We work togetherto create impact</p> 
             <button>Learn more</button>
          </div>
      </div> 
   <div><img src="./img/strategy.jpg">
        <divclass="text">
            <h1>Strategy</h1>
            <p>Every goal is partof our strategy</p>
            <button>Learn more</button>
        </div>
    </div>
    <div><img src="./img/innovation.jpg">
        <divclass="text">
           <h1>Innovation</h1>
            <p>We're focused onthinking different</p> <button>Learnmore</button> </div> </div> </div> <footerclass="zone"><p> 2019 Assaf Elovic All right reserved. Formore articles visit <ahref="www.assafelovic.com"> www.assafelovic.com</a></p></footer> </div> </body>复制代码

所以，笔者此次只着重讲解网页样式的设计（采用CSS）。浏览器

用Grid和Flex设置布局样式bash

经验之谈：有些元素须要Grid风格的样式，如表格、卡片、媒体专辑（如Instagram上的内容）等，这种状况就使用Grid 。其余状况就都用 Flex。强烈建议深刻学习这两个工具，由于要制做漂亮的响应式网页，只要掌握了Grid和Flex，就无需学习其余工具了。微信

导航栏app

制做导航栏要使用Flex，这样就能作出导航栏须要的单向行。因为使用了<nav>标签，须要删除点（列表样式）。最后，为了删除浏览器设置的默认边距，应将边距重设为零：函数

.main-nav {
    display: flex;
    list-style: none;
    margin: 0;
    font-size: 0.7em;
}复制代码

在改变浏览器宽度时，部分导航栏会被删除，所以宽度缩小时要调整导航栏大小：

@media only screen and (max-width: 600px) {
    .main-nav {
        font-size: 0.5em;
        padding: 0;
    }
}复制代码

要让“联系方式”这个选项右对齐，就要将左边距设置为“auto”，这样就能够自动将超连接的左边距设置为最大值：

.push {
    margin-left: auto;
}复制代码

最后，要让导航栏固定且始终出如今网页顶端，同时还要让导航栏覆盖在其余全部元素之上（z-index）：

.sticky {
  position: fixed;
  z-index: 1;
  top: 0;
  width: 100%;
}复制代码

封面

为保证画面简洁（即只保留中心内容），制做封面时应使用Flex。在Flex中设置好界面后，将内容水平居中对齐（X轴），布局容器和对齐项垂直居中（Y轴）。图像大小要适应整个屏幕，所以要将高度设置为100vh，这表明图像高度为100%：

.container {
    height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
}复制代码

封面文本还要居中且覆盖在图像之上：

.coverText {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    color: white;
    font-weight: bold;
}复制代码

请参照完整CSS样式表：https://github.com/assafelovic/Basic-Landing-Page-Layout/blob/master/style.css，了解其余微调的方法。

卡片网格

如上文所述，制做引导页须要建立卡片网格，此时须要使用Grid。grid-template-columns能够定义每栏的样式（或div）。参考信息：若是把宽度设置为1fr，那每栏就只有一个区块。对其设置repeat函数（和一遍遍输入1fr的效果相同），则它就能够从最小350像素自动全屏填充（1fr）。最后，将网格间隔（也就是网格对象之间的填充间隔）设置为20像素：

.grid-wrapper {
    display: grid;
    grid-template-columns:repeat(auto-fill, minmax(350px, 1fr));
    grid-gap: 10px;
}复制代码

接下来，要设置网格内每一个卡片的样式。以下文所示，定义每一个卡片的边距和背景色，方法十分简单：

.card {
    background-color: #444;
    margin: 50px;
}复制代码

每一个卡片要包含一张大小适应整个顶部区域的图片、一个标题和相应的文本段落、以及位于下方的“了解更多”按钮。并且卡片内部的图像、标题和段落要可控可调，代码以下所示：

.card > img {
    max-width: 100%;
    height: auto;
}.card h1 {
    font-size: 1.5rem;
}.card p {
    font-size: 1rem;
}复制代码

此时图片已经100%适应卡片宽度，但咱们还能够在卡片文本区适当添加一些填充间隔：

.card > .text {
    padding: 0 20px 20px;
}复制代码

最后，在每一个卡片内部添加按键设计。将边框设置为0（由于系统会默认添加边框），再设置一些间隔、颜色等等：

button {
    cursor: pointer;
    background: gray;
    border: 0;
    font-size: 1rem;
    color: white;
    padding: 10px;
    width: 100%;
}button:hover {
    background-color: #e0d27b;
}复制代码

页脚

最后，页脚也很重要。页脚的设置方式很是简单。调整内部文本大小使之小于默认值，再给页脚设置一些间隔和颜色：

footer {
    text-align: center;
    padding: 3px;
    background-color: #30336b;
}footer p {
    font-size: 1rem;
}复制代码

完成了！按照这种简单的响应式布局方法，就能够制做几乎全部想要的引导页。还能够应用动画库，升级本身的页面布局——下面是一些推荐的动画库：

1. SweetAlert（https://sweetalert2.github.io/）— 添加精美的警告框

2. Typed.js（https://github.com/mattboldt/typed.js/） —在页眉处添加输入动画

3. Auroral（https://lunarlogic.github.io/auroral/） — 添加动画式渐变背景图

4. OwlCarousel（https://owlcarousel2.github.io/OwlCarousel2/）— 给元素添加动画效果

5. Animate.css（https://daneden.github.io/animate.css/） — 给加载元素添加精美动画效果

完整源代码：https://github.com/assafelovic/Basic-Landing-Page-Layout

留言点赞关注

咱们一块儿分享AI学习与发展的干货
欢迎关注全平台AI垂类自媒体 “读芯术”

（添加小编微信：dxsxbb，加入读者圈，一块儿讨论最新鲜的人工智能科技哦～）