---
# System prepended metadata

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

---

# 稀飯版 Day19

Date: 2024/10/12

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


+ 架構：
```html
 <ul class="timeline">
  <li>
    <a href="#">
      <h2></h2>
      <p></p>
    </a>
  </li>
 </ul>
```

+ 重點：用 float 會比較好做
+ 重點：左右交錯排布：`float`
+ 重點：上下交錯排布：`transform: translateY(50%)`

![時間軸](https://i.imgur.com/b8vgu2v.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>Rogelio 的稀飯版練習紀錄</title>
    <link rel="preconnect" href="https://fonts.googleapis.com" />
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
    <link
      rel="stylesheet"
      href="https://fonts.googleapis.com/css2?family=Noto+Sans+TC:wght@100..900&display=swap" />
    <link rel="stylesheet" href="style.css" />
  </head>
  <body>
    <!-- 清單、左右交錯排布、上下交錯排布 -->
    <div class="wrap">
      <h1>稀飯版練習紀錄</h1>
      <p>稀飯版，據 Amos 大大 (CSScoke) 所述，</p>
      <p>是跟吃稀飯一樣 (或者是稀鬆平常、和吃飯一樣) 簡單的版型。</p>
      <p>連簡單的版型都不會自己切，要怎麼切好其他千變萬化的版型？</p>
      <ul class="timeline">
        <li>
          <a href="#">
            <h2>圖文滿版區塊</h2>
            <p>
              Lorem ipsum dolor sit amet consectetur adipisicing elit. Error
              doloremque non nihil esse delectus aut sequi accusantium
              reiciendis?
            </p>
          </a>
        </li>
        <li>
          <a href="#">
            <h2>互動圖文卡片</h2>
            <p>
              Lorem ipsum dolor sit amet consectetur adipisicing elit. Error
              doloremque non nihil esse delectus aut sequi accusantium
              reiciendis?
            </p>
          </a>
        </li>
        <li>
          <a href="#">
            <h2>人員介紹卡片</h2>
            <p>
              Lorem ipsum dolor sit amet consectetur adipisicing elit. Error
              doloremque non nihil esse delectus aut sequi accusantium
              reiciendis?
            </p>
          </a>
        </li>
        <li>
          <a href="#">
            <h2>交錯漂浮版</h2>
            <p>
              Lorem ipsum dolor sit amet consectetur adipisicing elit. Error
              doloremque non nihil esse delectus aut sequi accusantium
              reiciendis?
            </p>
          </a>
        </li>
        <li>
          <a href="#">
            <h2>超通用橫式版面</h2>
            <p>
              Lorem ipsum dolor sit amet consectetur adipisicing elit. Error
              doloremque non nihil esse delectus aut sequi accusantium
              reiciendis?
            </p>
          </a>
        </li>
        <li>
          <a href="#">
            <h2>網頁頁尾版塊</h2>
            <p>
              Lorem ipsum dolor sit amet consectetur adipisicing elit. Error
              doloremque non nihil esse delectus aut sequi accusantium
              reiciendis?
            </p>
          </a>
        </li>
        <li>
          <a href="#">
            <h2>導覽列</h2>
            <p>
              Lorem ipsum dolor sit amet consectetur adipisicing elit. Error
              doloremque non nihil esse delectus aut sequi accusantium
              reiciendis?
            </p>
          </a>
        </li>
        <li>
          <a href="#">
            <h2>麵包屑</h2>
            <p>
              Lorem ipsum dolor sit amet consectetur adipisicing elit. Error
              doloremque non nihil esse delectus aut sequi accusantium
              reiciendis?
            </p>
          </a>
        </li>
        <li>
          <a href="#">
            <h2>方塊酥版面</h2>
            <p>
              Lorem ipsum dolor sit amet consectetur adipisicing elit. Error
              doloremque non nihil esse delectus aut sequi accusantium
              reiciendis?
            </p>
          </a>
        </li>
        <li>
          <a href="#">
            <h2>破格式設計</h2>
            <p>
              Lorem ipsum dolor sit amet consectetur adipisicing elit. Error
              doloremque non nihil esse delectus aut sequi accusantium
              reiciendis?
            </p>
          </a>
        </li>
        <li>
          <a href="#">
            <h2>表格</h2>
            <p>
              Lorem ipsum dolor sit amet consectetur adipisicing elit. Error
              doloremque non nihil esse delectus aut sequi accusantium
              reiciendis?
            </p>
          </a>
        </li>
        <li>
          <a href="#">
            <h2>側邊選單</h2>
            <p>
              Lorem ipsum dolor sit amet consectetur adipisicing elit. Error
              doloremque non nihil esse delectus aut sequi accusantium
              reiciendis?
            </p>
          </a>
        </li>
        <li>
          <a href="#">
            <h2>收合式側邊選單</h2>
            <p>
              Lorem ipsum dolor sit amet consectetur adipisicing elit. Error
              doloremque non nihil esse delectus aut sequi accusantium
              reiciendis?
            </p>
          </a>
        </li>
        <li>
          <a href="#">
            <h2>收合式多層次側邊選單</h2>
            <p>
              Lorem ipsum dolor sit amet consectetur adipisicing elit. Error
              doloremque non nihil esse delectus aut sequi accusantium
              reiciendis?
            </p>
          </a>
        </li>
        <li>
          <a href="#">
            <h2>訂單進度條</h2>
            <p>
              Lorem ipsum dolor sit amet consectetur adipisicing elit. Error
              doloremque non nihil esse delectus aut sequi accusantium
              reiciendis?
            </p>
          </a>
        </li>
        <li>
          <a href="#">
            <h2>登入表單</h2>
            <p>
              Lorem ipsum dolor sit amet consectetur adipisicing elit. Error
              doloremque non nihil esse delectus aut sequi accusantium
              reiciendis?
            </p>
          </a>
        </li>
        <li>
          <a href="#">
            <h2>訊息對話紀錄</h2>
            <p>
              Lorem ipsum dolor sit amet consectetur adipisicing elit. Error
              doloremque non nihil esse delectus aut sequi accusantium
              reiciendis?
            </p>
          </a>
        </li>
        <li>
          <a href="#">
            <h2>時間軸</h2>
            <p>
              Lorem ipsum dolor sit amet consectetur adipisicing elit. Error
              doloremque non nihil esse delectus aut sequi accusantium
              reiciendis?
            </p>
          </a>
        </li>
      </ul>
    </div>
  </body>
</html>
```

```css
/* style.css */

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

.wrap {
  width: 900px;
  margin: auto;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.wrap > h1 {
  padding: 100px;
  font-size: 72px;
}

.wrap > p {
  line-height: 48px;
  font-size: 24px;
}

.timeline {
  padding: 100px 0 200px 0;
}

.timeline li {
  width: 50%;
  box-sizing: border-box;
  padding: 20px 0;
  position: relative; /* 線條的相對位置 */
}

/* 左右交錯排布 (奇數在左邊) */
.timeline li:nth-child(odd) {
  float: left;
  padding-right: 100px;
}

/* 左右交錯排布 (偶數在右邊) */
.timeline li:nth-child(even) {
  float: right;
  padding-left: 100px;
  transform: translateY(50%); /* 上下交錯排布
  (右邊的下面些) */
}

.timeline a {
  overflow: hidden;
  height: 168px; /* Rogelio: 不設定高的話，字數一旦對不齊，
  一是大小不一不好看，二是 float 會爆炸 */
  text-decoration: none;
  display: block; /* 轉型成 block */
  background-color: #fff;
  border: 1px solid #aaa;
  box-sizing: border-box;
  padding: 20px;
  border-radius: 10px;
  box-shadow: 3px 3px 5px #a7a591;
  transition: 300ms;
}

.timeline h2 {
  color: #333;
}

.timeline p {
  color: #666;
  font-weight: 300;
}
/******************** Main Ends ********************/

/******************** Hover Starts ********************/
.timeline a:hover {
  background-color: wheat;
}
/******************** Hover Ends ********************/

/******************** Line Starts ********************/
/* 時間軸線條 */
/* 左邊卡片線條在右邊 (註：我們有做左 padding) */
.timeline li:nth-child(odd)::after {
  content: "";
  position: absolute;
  height: 100%;
  width: 1px;
  top: 0;
  right: 0;
  background-color: #ccc;
  z-index: -1; /* 防止線條蓋住圓點 */
}

/* 時間軸線條 */
/* 如果你希望結束線再往下長一些的話 */
.timeline li:nth-last-child(2)::after {
  height: 150%;
}

/* 樹枝線條 */
.timeline a::after {
  content: "";
  position: absolute; /* 注意：
  因為 li 的 ::after 被用過了，你有兩種選擇
  1. 挑 li::before 拿來用
  2. 挑 a::after 拿來用 (我選這個)
  這裡不用再跑到 a 去設 relative，
  因為 absolute 會一直往父層 search relative，
  阿我們本來就是想要它以 li 為主 (li 我們有設 relative)。 */
  width: 100px;
  height: 1px;
  background-color: #aaa;
  /* 每個樹枝都在各自卡片的垂直置中位置 */
  top: 0;
  bottom: 0;
  margin: auto 0;
  /* 每個樹枝都在各自卡片的垂直置中位置 */
}

.timeline li:nth-child(odd) a::after {
  right: 0;
}

.timeline li:nth-child(even) a::after {
  left: 0;
}
/******************** Line Ends ********************/

/******************** Point Starts ********************/
.timeline li::before {
  content: "";
  position: absolute;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background-color: #aaa;
  /* 每個點都在各自卡片的垂直置中位置 */
  top: 0;
  bottom: 0;
  margin: auto 0;
  /* 每個點都在各自卡片的垂直置中位置 */
}

.timeline li:nth-child(odd)::before {
  right: -10px;
}

.timeline li:nth-child(even)::before {
  left: -10px;
}
/******************** Point Ends ********************/
```

### My Practice

註：在 vite 的 WelcomeItem.vue 中看到的實現 (2024/11/27)

```css
  .item {
    margin-top: 0;
    padding: 0.4rem 0 1rem calc(var(--section-gap) / 2);
  }

  i {
    top: calc(50% - 25px);
    left: -26px;
    position: absolute;
    border: 1px solid var(--color-border);
    background: var(--color-background);
    border-radius: 8px;
    width: 50px;
    height: 50px;
  }

  .item:before {
    content: ' ';
    border-left: 1px solid var(--color-border);
    position: absolute;
    left: 0;
    bottom: calc(50% + 25px);
    height: calc(50% - 25px);
  }

  .item:after {
    content: ' ';
    border-left: 1px solid var(--color-border);
    position: absolute;
    left: 0;
    top: calc(50% + 25px);
    height: calc(50% - 25px);
  }

  .item:first-of-type:before {
    display: none;
  }

  .item:last-of-type:after {
    display: none;
  }
```