Day 1 - 圖文滿版區塊


Posted by hamster on 2021-04-09

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

畫面呈現

HTML結構

結構說明:

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

CSS結構

縮排技巧

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

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

圖片+顏色背景

  • background: 可設定多種背景,用,隔開。
    • center center / 100% 100% : 分別只background-positionbackground-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%;
  }

#css







Related Posts

[第六週]  CSS  Part2 -  裝飾起來吧

[第六週] CSS Part2 - 裝飾起來吧

ttt

ttt

Export and import MongoDB collection

Export and import MongoDB collection


Comments