iT邦幫忙

2021 iThome 鐵人賽

DAY 9
0
自我挑戰組

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

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

前言

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

  • 規劃學習目標:
    金魚切版系列共有30集,而我當時設定的目標是每個影片至少都要看過,並跟著實作,一週至少完成2個。
  • 如何投入:
  1. 平日上午、中午的時間,我會直接點開老師的影片先看過,了解是怎麼構思頁面版型、如何設定樣式。
  2. 下班後,時間會比較充裕,約有1-2小時,會先將上午看的部分,嘗試實作,如果沒辦法,就會改成邊觀看影片 > 暫停 > 自己練習。 將一個影片拆成好幾段落來練習。
  3. 假日的話,會先將完成好的任務,製作筆記順便複習一次,也會針對不熟的地方,再憑著印象在實作看看。

範例說明 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讓內容文字能夠依照想要的方式來進行排列。

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

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

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

  2. flex 的使用
    玩轉CSS

  3. 多重背景

  • 整個版面是將此背景圖放在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%;

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

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


上一篇
[Day 8] 學學CSS,讓網頁增加色彩
下一篇
[Day 10] 練練CSS,加強實作練習
系列文
邊工作邊進行前端學習之旅30

尚未有邦友留言

立即登入留言