# 稀飯版 Day1 Date: 2024/10/01 ### [CSScoke](https://youtu.be/rwTMBmnIHcY) ![圖文滿版區塊](https://i.imgur.com/PWnKBSQ.png) ```html <!-- index.html --> <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>Document</title> <link rel="stylesheet" href="style.css" /> </head> <body> <div class="banner"> <div class="container"> <div class="banner-txt"> <h1> 金魚都能懂的 <small> 這個網頁畫面怎麼切 </small> </h1> <h2>圖文滿版區塊</h2> <p>這畫面實在常見，在各種樣版網站可說是設計常客</p> </div> </div> </div> </body> </html> ``` ```css /* style.css */ /******************** Main Starts ********************/ * { margin: 0; padding: 0; list-style: none; } /* 背景 */ .banner { width: 100%; height: 700px; background-color: #ccc; background: linear-gradient(115deg, #7bf 50%, transparent 50%) center center / 100% 100%, url("https://picsum.photos/1200/600") right center / auto 100%; /* 雙重背景 */ } /* 容器 */ .container { width: 100%; max-width: 1440px; /* 寬度盡量跟著視窗， 標題基本上會黏著視窗左邊，但設定一個最寬值，確保遇到太寬的視窗時不會飛太遠 */ height: 100%; margin: auto; /* 水平垂直皆居中 */ } /* 橫幅標題 */ .banner-txt { height: 100%; display: flex; flex-direction: column; justify-content: center; align-items: flex-start; /* flex 預設每一排都是等寬， 這表示你可能遇到元素不按內容物去擴充寬度、 而是直接長到和 flex 一排等寬度的情況， 此時你可以使用 align-items: flex-start 解決來縮減這些尺寸 */ } .banner-txt h1 { font-size: 80px; border-bottom: 1px solid #333; font-weight: 900; padding-bottom: 0.3em; margin-bottom: 0.3em; } .banner-txt h1 small { display: block; /* small 是 inline element，要轉成 block 才會換行顯示 */ font-size: 53px; font-weight: 700; } .banner-txt h2 { font-size: 50px; font-weight: 700; } .banner-txt p { font-size: 28px; font-weight: 300; } /******************** Main Ends ********************/ ``` ### My Practice