CSS 筆記 - 金魚系列 06 - 頁尾資訊區域

這次要切的許多公司形象或電商網站下方會出現的頁尾資訊，就是一堆公司、產品、服務或連絡資訊的地方，像是這個頁面最下方。

Google font 使用

先記錄一下 Google font 的使用，先到該頁面找到喜歡的字體，我是找 Noto Sans TC 思源黑體，

點進去後會出現字體粗細度的預覽，選擇想要使用的粗細度後，

右邊會出現選擇後的資訊，

再選到標籤 Embed 把 CSS 網址複製貼上到 <head> 區塊，並把字體家族貼到 CSS。

HTML head

<link
  href="https://fonts.googleapis.com/css2?family=Noto+Sans+TC:wght@300;500;700;900&display=swap"
  rel="stylesheet"
/>

CSS font-family

1	font-family: "Noto Sans TC", sans-serif;

HTML 架構

架構很簡單，一樣的內容沒問題，就複製貼上三遍，最後一個是訂閱電子報~~(強迫接收廣告)~~，還有一個 footer 區塊。

這邊學到最下方這個符號 © 的寫法是 ©，編輯器如果有使用 emmet，只要打 &c 就會自動跳出選擇了，記得最後要加「分號 ;」。

<div class="main_footer">
  <div class="wrap">
    <div class="item">
      <h4>金魚系列 VI - 頁尾資訊區域</h4>
      <ul>
        <li><i class="fas fa-chevron-right"></i>flex-direction 的原理</li>
        <li><i class="fas fa-chevron-right"></i>flex-grow</li>
        <li><i class="fas fa-chevron-right"></i>Google font 使用</li>
        <li><i class="fas fa-chevron-right"></i>font-awesome</li>
      </ul>
    </div>
    <div class="item">
      <h4>公司形象網站必切</h4>
      <ul>
        <li><i class="fas fa-chevron-right"></i>不學起來不行</li>
        <li><i class="fas fa-chevron-right"></i>太常用到了</li>
        <li><i class="fas fa-chevron-right"></i>flex-grow 真好用</li>
        <li><i class="fas fa-chevron-right"></i>快趁機學起來當字典</li>
      </ul>
    </div>
    <div class="item">
      <h4>友站連結</h4>
      <ul>
        <li><i class="fas fa-chevron-right"></i>異業結盟專區</li>
        <li><i class="fas fa-chevron-right"></i>異業都要結盟了</li>
        <li><i class="fas fa-chevron-right"></i>同業還不結盟</li>
        <li><i class="fas fa-chevron-right"></i>團結力量大</li>
      </ul>
    </div>
    <div class="item">
      <h4>訂閱電子報</h4>
      <form>
        <input type="text" placeholder="電子報還沒看就刪掉了" />
        <button class="subsBtn">訂閱</button>
      </form>
    </div>
  </div>
  <div class="copyright">
    <p>copyright &copy; Follow CSScoke Goldfish series by Hsuchihting</p>
  </div>
</div>

CSS 樣式

筆記重點，

基本 layout 設定，並把頁尾資訊區塊固定在最下方，因為這是 Demo 示意用，但真正的專案不會這樣寫。

.main_footer {
  background: linear-gradient(-270deg, #0d47a1, #03a9f4);
  padding: 100px 0 0 0;
  position: fixed;
  bottom: 0;
  right: 0;
  left: 0;
}
.wrap {
  width: 1200px;
  margin: 0 auto;
  display: flex;
}

flex-grow

這次學到使用 flex-grow 讓 .item 的區塊都一樣寬，相當方便，都不用計算了。

.item {
  display: flex;
  flex-direction: column;
  flex-grow: 1;
  color: #fff;
  margin-right: 1%;
  margin-left: 1%;

字體粗細設定

剛剛載入的 google font 就派上用場了，粗細度可以看到 link 片斷程式碼為 wght@300;500;700;900，所以粗細度就用這些數字去做設定。

h4 {
  font-size: 24px;
  border-bottom: 1px dotted #fff;
  font-weight: 700;
  padding-bottom: 10px;
}
li {
  font-size: 16px;
  font-weight: 300;
  padding-top: 10px;
  line-height: 1.5;

訂閱電子報區塊

最後的是用 input + button 的組合，因為整體有使用盒模型設定，使用 flex 就會緊密併排，再使用 margin: auto 0; 就會讓其垂直置中。

垂直置中超常用到，一定要學會，可看 Amos 老師的 23 種垂直置中方式。

1
2
3

form {
   display: flex;
   margin: auto 0;

最後就完成了!

CodePen https://codepen.io/hnzxewqw/full/NWxEPpJ

提姆寫程式