用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，加入讀者圈，一塊兒討論最新鮮的人工智能科技哦～）

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。