---
# System prepended metadata

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

---

# 稀飯版 Day5

Date: 2024/10/05

### [CSScoke](https://youtu.be/-mmzaE6eLzY)

![超通用橫式版面](https://i.imgur.com/HcYvTA4.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>超通用橫式版面</title>
    <link rel="stylesheet" href="style.css">
    <link rel="preconnect" href="https://fonts.googleapis.com" />
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
    <link href="https://fonts.googleapis.com/css2?family=Noto+Sans+TC:wght@100..900&display=swap" rel="stylesheet" />
  </head>
  <body>
    <div class="wrap">
        <div class="container"> 
            <div class="item">
                <div class="pic">
                    <img src="https://picsum.photos/400/400/?random=10" alt="" />
                </div>
                <div class="txt">
                    <h2>臨海的列車</h2>
                    <p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Natus debitis sit, voluptates officiis sequi doloremque atque culpa dolorem ducimus ratione sapiente architecto est vero asperiores cum nobis ab in excepturi.</p>
                    <a href="#" class="btn">more</a>
                </div>
            </div>
            <div class="item">
                <div class="pic">
                    <img src="https://picsum.photos/400/400/?random=20" alt="" />
                </div>
                <div class="txt">
                    <h2>六月星圖</h2>
                    <p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Natus debitis sit, voluptates officiis sequi doloremque atque culpa dolorem ducimus ratione sapiente architecto est vero asperiores cum nobis ab in excepturi.</p>
                    <a href="#" class="btn">more</a>
                </div>
            </div>
            <div class="item">
                <div class="pic">
                    <img src="https://picsum.photos/400/400/?random=30" alt="" />
                </div>
                <div class="txt">
                    <h2>夢海</h2>
                    <p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Natus debitis sit, voluptates officiis sequi doloremque atque culpa dolorem ducimus ratione sapiente architecto est vero asperiores cum nobis ab in excepturi.</p>
                    <a href="#" class="btn">more</a>
                </div>
            </div>
            <div class="item">
                <div class="pic">
                    <img src="https://picsum.photos/400/400/?random=40" alt="" />
                </div>
                <div class="txt">
                    <h2>微行動劇</h2>
                    <p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Natus debitis sit, voluptates officiis sequi doloremque atque culpa dolorem ducimus ratione sapiente architecto est vero asperiores cum nobis ab in excepturi.</p>
                    <a href="#" class="btn">more</a>
                </div>
            </div>
        </div>
    </div>
  </body>
</html>

```

```css
/* style.css */

/******************** Main Starts ********************/
* {
  margin: 0;
  padding: 0;
  list-style: none;
  font-family: "Noto Sans TC", sans-serif;
}

html {
  height: 100vh;
}

body {
  height: 100%;
  background: linear-gradient(-30deg, #fdaecb, #e7597f, #fe8556);
}

.wrap {
  height: 100%;
}

.container {
  height: 400px;
  margin: 0 auto;
  display: flex;
  justify-content: center;
  flex-wrap: wrap; /* 如果有更多 item 就開始換行
  (調整 width 就可以拉各種版型了) */
}

.item {
  width: 368px; /* 368 + 1 * 2 = 370 */
  margin: 15px 15px; /* 370 + 15 * 2 = 400 */
  display: flex; /* 文字與圖片橫向排列 */
  background-color: rgba(255, 255, 255, 0.2);
  border: 1px solid #888;
  box-shadow: 6px 8px 30px rgba(160, 0, 0, 0.5); /* 
  Amos : 黑色髒髒的。
  !!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!
  就設計上來講，會希望陰影色彩和背景較融合在一起。
  所以讓陰影色彩帶一點背景色比較漂亮。
  (所以這裡選擇加一些紅色)
  !!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!
  */
}

.item .pic {
  width: 50%;
}
.item .pic img {
  width: 100%;
  height: 100%;
  object-fit: cover; /* 可以直接設定在 img 上，
  然後相較於 background 嵌入圖片，
  再用 background-size: cover 設定，
  這作法利於 SEO (圖片連結在 HTML 上) */
}
.item .txt {
  width: 50%;
  /* 文字和圖片拉開距離，但又要維持 50% 50%
  (換 border-box 模型) */
  box-sizing: border-box;
  padding: 20px;
  display: flex;
  flex-direction: column;
}
.item .txt h2 {
  padding: 5px; /* Rogelio: 文字和周遭拉出空間 */
  font-weight: 700;
  /* margin-bottom: .4em; */
}
.item .txt p {
  padding: 5px; /* Rogelio: 文字和周遭拉出空間 */
  white-space: normal;
  font-weight: 300;
  /* Rogelio: 多行省略大禮包
   */
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 7;
  box-sizing: border-box;
}

/* 按鈕要 .txt 在右下角 */
.item .txt .btn {
  line-height: 2em;
  border: 1px solid #888;
  padding: 0 1em;
  align-self: flex-end; /* 縮到右邊 */
  text-decoration: none;
  border-radius: 20px;
  margin-top: auto; /* 按鈕 box 往上填到最滿，
  這樣才會對齊最底下 */
  color: #888;
  transition: 500ms;
}

.item .txt .btn:hover {
  background-color: #bbb;
  color: #fff;
}
/******************** Main Ends ********************/
```

### My Practice