用Grid和Flex，十分鐘快速製作登陸網頁
全文共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，加入讀者圈，一起討論最新鮮的人工智能科技哦～）