星期三, 12月 10, 2025

[CSS] Blogger 排版設計

模擬 Blogger 手機版排版設計，電腦版排版設計右側 sidebar 會同時有多個區塊 (關於我、文章分類、依日期分類等)，但在手機板上瀏覽，只會有 [關於我] 區塊沉在主要文章區塊下方

index.html 
<!DOCTYPE html>
<html lang="zh-Hant-TW">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="styles.css">
    <title>[CSS] Blogger 排版設計</title>
</head>

<body>
    <div class="wrap">

        <div class="item">
            <img src="https://125408140_c9204a223e_n.jpg" alt="台北大直橋">
            <h2>台北大直橋</h2>
            <p>台北大直橋是橫跨基隆河的一座醒目地標，以其獨特的白色拱形鋼纜設計而聞名，流線型的橋身優雅地劃過水面，極具現代感。夜幕降臨後，橋體會亮起多變的燈光秀，與周圍的內湖科技園區和美麗華摩天輪夜景相互輝映，是攝影愛好者的熱點。它不僅是重要的交通樞紐，更是一座融合工程與藝術的城市景觀橋。
            </p>
        </div>

        <div class="siderbar">
            <div class="aboutme">
                <h2>關於我</h2>
                <p>以下省略一萬字</p>
            </div>
            <div class="mobile-hide">
                <h2>文章分類</h2>
                <p>HTML</p>
                <p>CSS</p>
                <p>Javascript</p>
            </div>
            <div class="mobile-hide">
                <h2>依日期分類</h2>
                <p>2025 (77)</p>
                <p>2024 (108)</p>
            </div>
        </div>
    </div>
</body>

</html>
style.css 
*,
*::before,
*::after {
    box-sizing: border-box;
}

.wrap {
    max-width: 1024px;
    margin: 0 auto;
    display: flex;
}

.content {
    display: flex;
    flex-direction: column;
    gap: 10px;
    flex: 1;
}

.item {
    padding: 10px;
    border: lightgray 1px solid;
}

.item img {
    display: block;
    margin: 0 auto;
}

.item h2 {
    text-align: center;
    font-size: 25px;
}

.siderbar {
    flex: 0 0 200px;
    padding: 20px;
    border: lightgray 1px solid;
}

@media(max-width: 992px) {

    /* 讓 content 和 sidebar 折行 */
    .wrap {
        flex-wrap: wrap;
    }

    .content,
    .siderbar {
        width: 100%; /* 確保 content 和 sidebar 佔滿 wrap  */
        flex: auto; /* 取消 flex 相關設定 */
    }

    /* sidebar 折行後，和 content 有底部間距 */
    .content {
        margin-bottom: 20px;
    }

    /* 移除 sidebar 的邊界和內距，不凸顯它的存在 */
    .siderbar {
        border: none;
        padding: 0;
    }

    /* 隱藏 mobile-hide */
    .mobile-hide {
        display: none;
    }

    /* 讓 aboutme 更像一個獨立區塊 */
    .aboutme {
        padding: 10px;
        border: lightgray 1px solid;
    }
}
效果呈現
張貼者： TerryTsai 標籤：

沒有留言:

張貼留言

訂閱： 張貼留言 (Atom)