[Day 9] 練練CSS，「Amos - 金魚都能懂的網頁切版」實作練習 - iT 邦幫忙::一起幫忙解決難題，拯救 IT 人的一天

2021 iThome 鐵人賽

DAY 9

自我挑戰組

邊工作邊進行前端學習之旅系列第 9 篇

[Day 9] 練練CSS，「Amos - 金魚都能懂的網頁切版」實作練習

13th鐵人賽

Eva

2021-09-09 22:27:13

2394 瀏覽

分享至

前言

相信很多剛開始接觸CSS或想對切版有所認識，都知道Amos老師吧！！非常非常感謝老師的系列教學影片，給我這新手莫大幫助啊！
我是從金魚都能懂的網頁切版開始學習，並從老師提供的其他影片去加深觀念～～

規劃學習目標：
金魚切版系列共有30集，而我當時設定的目標是每個影片至少都要看過，並跟著實作，一週至少完成2個。
如何投入：

平日上午、中午的時間，我會直接點開老師的影片先看過，了解是怎麼構思頁面版型、如何設定樣式。
下班後，時間會比較充裕，約有1-2小時，會先將上午看的部分，嘗試實作，如果沒辦法，就會改成邊觀看影片 > 暫停 > 自己練習。將一個影片拆成好幾段落來練習。
假日的話，會先將完成好的任務，製作筆記順便複習一次，也會針對不熟的地方，再憑著印象在實作看看。

範例說明 Amos金魚系列- 圖文滿版區塊

觀察老師的製作方式

首先，會先了解div的放置、使用什麼標籤，順便熟悉一下HTML。

用一個取名為banner的區塊
裡面放一個container的容器，作為來設定裝下裡面文字的容器
此container中，再放一個class="banner-txt"，用來放置文字區塊

<body>
  <div class="banner">
    <div class="container">
      <!-- 設定固定寬度的容器 -->
      <div class="banner-txt">
        <h1>金魚都能懂的
          <small>這個網頁畫面怎麼切</small>
        </h1>
        <h2>圖文滿版區塊</h2>
        <p>這畫面實在常見，在各種樣版網站可說是設計常客
          金魚切不出來實在說不過去阿</p>

      </div>
    </div>
  </div>

</body>

接下來，CSS的簡單解析

在banner的地方會去設定填滿整個視窗。
container用來設定所放入文字的容器，他的寬與高，並讓他置中。
banner-txt的地方，將高度設定和container一樣，並設定flex讓內容文字能夠依照想要的方式來進行排列。

會將幾個製作的大方向紀錄下來，換自己實作時可以提醒自己下一步可以從哪邊下手。

根據影片所提及的重點延伸

CSS Reset
金魚都能懂網頁設計入門 : CSS Reset
meyerweb.com
計網頁時重要的起手式，主要是為了讓各家瀏覽器的網頁外觀維持一致。
不同瀏覽器，在一開始，會有預設的部分，會導致在做css時和預想的設置會有差異，所以要記得reset。
flex 的使用
玩轉CSS
多重背景

整個版面是將此背景圖放在banner區塊
用線性方式

/* 多重背景的使用 */
      background: linear-gradient(115deg, darksalmon 50%, transparent 50%)center center /100% 100%, url(https://picsum.photos/seed/picsum/1200/600)right center /auto 100%;

參考資料
金魚都能懂的網頁設計-雜記

以上～說明我是如何規劃練習時間、而在看教學影片時，會如何學習、實作的方式。