---
# System prepended metadata

title: 稀飯版 Day1
tags: [Layout, CSS, HTML]

---

# 稀飯版 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