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