用Grid和Flex，十分钟快速制作登陆网页

读芯术
948 阅读6分钟

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

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

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

那么就开始吧！

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

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

index.html的代码非常简单，主要包含div标签和整体的网页结构：

<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设置布局样式

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

导航栏

制作导航栏要使用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，加入读者圈，一起讨论最新鲜的人工智能科技哦～）


avatar
文章
阅读
粉丝