今日文章目錄
> - 視差背景
> - 事前準備
> - CSS 說明
> - 參考資料

視差背景

• 這次的練習是依據 CSScoke 金魚都能懂的CSS必學屬性系列 第 21 篇
  (CSScoke前輩講的很詳細，可以直接點擊連結去看，才能學到東西)
  .
  .
  .
  .
  .
  .
  .
  .
  .
  .
  .
  .
  .
  .
  .
  .
  .
  .
  .
  .
  .
  .
  欸怎麼還在？還不去看！

事前準備

• HTML 結構：

    <div class="section topic1">A</div>
    <div class="section topic2">B</div>
    <div class="section topic3">Next Step?</div>
    <div class="section topic4">C</div>
    <div class="section topic5">What are you waiting for?</div>
    <div class="section topic6">E</div>
  

CSS 說明

• 100vw 100vh: vw視窗寬，vh視窗高。100vw代表100%視窗寬，100vh代表100%視窗高。

• line-height: 100vh : 文字行高同視窗高。(這裡因為只有一行字，用來創造垂直置中的效果。如果多行顯示，一行字就佔滿整個視窗高，要看下一行就要往下拉囉！)

• background : 完整參數設定依序為

  • background-color
  • background-image
  • background-scroll
  • background-repeat
  • background-position
  • background-size

  詳解請去看 CSScoke 金魚都能懂的CSS必學屬性系列 第 22 篇

• codepen 完整練習：https://codepen.io/chen-chens/pen/JjJRWmb

參考資料

CSScoke 金魚都能懂的CSS必學屬性系列 第 21 篇

今天很廢，生不出東西...程式的世界很大，我很想加入，必須多練！
這次來參加鐵人賽，有兩個目的：

• 不管寫多爛，30天都要寫好寫滿!
• 看看自己學的到底有沒有吸收進去，問題在哪裡，過程會告訴我答案。(嗯...RWD這樣母湯)
  

在茫然大海載浮載沈的朋友們，一起加油吧！

明日預告：三角形