Day 1 - 圖文滿版區塊

Youtube教學連結：金魚都能懂的網頁切版 : 圖文滿版區塊

畫面呈現

HTML結構

結構說明：

• banner:整個版面
• container:讓內容得以縮排的div
• <small>:讓文本的字體小一號MDN

CSS結構

縮排技巧

設定外層的寬度，並利用margin:auto的技巧置中，可以使得內容在較大版面上，左右留有空間。

.container{
   width: 1200px;
   margin:auto;
}

圖片+顏色背景

• background: 可設定多種背景，用,隔開。
  • center center / 100% 100% : 分別只background-position與background-size屬性。
• linear-gradient():
  • 115deg: 設定漸層角度，0deg表示從下到上。
  • #7bf, 50%, transparent 50%: 利用兩個顏色皆為50%的方式，產生solid的畫面。

 .banner {
    width: 100%;
    height: 100vh;
    background-color: #ccc;
    background: linear-gradient(115deg, #7bf, 50%, transparent 50%) center
        center / 100% 100%,
      url("https://picsum.photos/1200/600?random=10") right center / auto 100%;
  }