HTML/CSS 切版完全攻略｜Flexbox、Grid 排版技巧一次搞懂

切版（Web Layout）是前端工程師的基本功，也是將設計轉化為動態、互動網頁的關鍵。這篇文章將以完整且有系統的方式，帶你深入了解 HTML / CSS 的切版技巧，並透過範例實戰，幫助你真正掌握前端佈局的精髓。

一、切版前必懂的基本概念

網頁切版是什麼

切版是將設計圖（如 Figma、Adobe XD）轉換為 HTML 和 CSS 語法，並依照設計忠實呈現畫面。這不僅需要對 HTML / CSS 熟練，更需要了解設計邏輯、版面配置與使用者體驗。

常見網頁佈局類型與情境範例

固定寬度版型（Fixed Layout）

.container {
    width: 1200px;
    margin: 0 auto;
}

流動版型（Fluid Layout）

.container {
    width: 80%;
}

響應式版型（Responsive Layout）

@media (max-width: 768px) {
    .container {
        flex-direction: column;
    }
}

自適應版型（Adaptive Layout）

二、HTML 基礎結構與語義化

常用標籤與範例

<header> 網站標頭
<nav> 導覽列
<main> 主要內容
<footer> 頁尾
<section>、<article>、<aside> 結構化內容

範例

<!DOCTYPE html>
<html lang="zh-TW">
<head>
    <meta charset="UTF-8">
    <title>範例網頁</title>
</head>
<body>
    <header>
        <h3>網站標題</h3>
    </header>
    <nav>
        <ul>
            <li><a href="#">首頁</a></li>
        </ul>
    </nav>
    <main>
        <section>
            <h3>最新文章</h3>
            <article>
                <h3>切版技巧</h3>
                <p>這是一篇教你如何切版的文章。</p>
            </article>
        </section>
    </main>
    <footer>
        <p>&copy; 2025 OOLIN</p>
    </footer>
</body>
</html>

三、CSS 佈局技巧與範例

常用定位方法

靜態定位（static）
相對定位（relative）
絕對定位（absolute）
固定定位（fixed）
黏性定位（sticky）

範例

header {
    position: sticky;
    top: 0;
    background: #fff;
}

Flexbox 完全攻略

主軸與交叉軸（Main Axis & Cross Axis）
flex-direction、justify-content、align-items

範例

.container {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: stretch;
}
.child {
    flex: 1;
    padding: 10px;
}
.child.large {
    flex: 2;
}

Grid 完全攻略

grid-template-columns / rows
gap、justify-items、align-items

範例

.grid-container {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 20px;
}
.item {
    background: #f0f0f0;
    padding: 20px;
    text-align: center;
}

完整範例

<!DOCTYPE html>
<html lang="zh-TW">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Grid 完全攻略範例</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            margin: 0;
            padding: 0;
            display: flex;
            justify-content: center;
            align-items: center;
            min-height: 100vh;
            background: #f7f7f7;
        }

        .grid-container {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
            gap: 20px;
            width: 80%;
            max-width: 1200px;
        }

        .grid-item {
            background: #4CAF50;
            color: white;
            padding: 20px;
            text-align: center;
            border-radius: 8px;
            box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
            transition: transform 0.3s ease-in-out;
        }

        .grid-item:hover {
            transform: scale(1.05);
        }

        @media (max-width: 768px) {
            .grid-container {
                grid-template-columns: 1fr;
            }
        }
    </style>
</head>
<body>
    <div class="grid-container">
        <div class="grid-item">區塊 1</div>
        <div class="grid-item">區塊 2</div>
        <div class="grid-item">區塊 3</div>
        <div class="grid-item">區塊 4</div>
        <div class="grid-item">區塊 5</div>
        <div class="grid-item">區塊 6</div>
    </div>
</body>
</html>

四、響應式設計（RWD）技巧

Media Query（媒體查詢）是實現響應式設計的關鍵技術，讓我們可以根據裝置的螢幕尺寸、解析度或其他條件來調整版面設計。以下是常用的 Media Query 語法範例：

針對平板裝置

@media (max-width: 1024px) {
    .container {
        flex-direction: column;
    }
}

針對手機裝置

@media (max-width: 600px) {
    .container {
        padding: 10px;
    }
}

針對高解析度螢幕（Retina 顯示器）

@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
    .logo {
        background-image: url('logo@2x.png');
    }
}

調整字型大小

h3 {
    font-size: 2rem;
}
@media (max-width: 768px) {
    h3 {
        font-size: 1.5rem;
    }
}

版面配置調整

.container {
    display: flex;
    flex-direction: row;
}
@media (max-width: 768px) {
    .container {
        flex-direction: column;
    }
}

顯示與隱藏元素

.desktop-menu {
    display: block;
}
@media (max-width: 768px) {
    .desktop-menu {
        display: none;
    }
    .mobile-menu {
        display: block;
    }
}

常用 RWD 設計範例

圖片自適應

img {
    max-width: 100%;
    height: auto;
}

隱藏與顯示元素

@media (max-width: 600px) {
    .desktop-menu {
        display: none;
    }
}

彈性版型設計

.flex-container {
    display: flex;
    flex-wrap: wrap;
}
.flex-item {
    width: 50%;
}
@media (max-width: 768px) {
    .flex-item {
        width: 100%;
    }
}

五、實戰範例

類似部落格版型

.blog-layout {
    display: grid;
    grid-template-areas:
        "header header"
        "nav main"
        "footer footer";
}

完整範例

<!DOCTYPE html>
<html lang="zh-TW">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>部落格版型範例</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            margin: 0;
            padding: 0;
            display: flex;
            justify-content: center;
            align-items: center;
            min-height: 100vh;
            background: #f4f4f4;
        }

        .blog-layout {
            display: grid;
            grid-template-areas:
                "header header"
                "nav main"
                "footer footer";
            grid-template-columns: 1fr 3fr;
            gap: 20px;
            width: 90%;
            max-width: 1200px;
        }

        header {
            grid-area: header;
            background: #6200ea;
            color: white;
            text-align: center;
            padding: 20px;
            border-radius: 8px;
        }

        nav {
            grid-area: nav;
            background: #03dac6;
            color: white;
            padding: 20px;
            border-radius: 8px;
        }

        main {
            grid-area: main;
            background: #ffffff;
            padding: 20px;
            border-radius: 8px;
            box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
        }

        footer {
            grid-area: footer;
            background: #6200ea;
            color: white;
            text-align: center;
            padding: 10px;
            border-radius: 8px;
        }

        @media (max-width: 768px) {
            .blog-layout {
                grid-template-areas:
                    "header"
                    "nav"
                    "main"
                    "footer";
                grid-template-columns: 1fr;
            }
        }
    </style>
</head>
<body>
    <div class="blog-layout">
        <header>部落格標題</header>
        <nav>側邊導航</nav>
        <main>
            <h3>文章標題</h3>
            <p>這是一篇部落格範例文章，展示如何使用 CSS Grid 完成響應式版型設計。</p>
        </main>
        <footer>&copy; 2025 OOLIN</footer>
    </div>
</body>
</html>

類似商品卡片設計

.product-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    transition: transform 0.3s ease-in-out;
}
.product-card:hover {
    transform: scale(1.05);
}

完整範例

<!DOCTYPE html>
<html lang="zh-TW">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>電商商品卡片設計範例</title>
    <style>
        body {
            display: flex;
            justify-content: center;
            align-items: center;
            min-height: 100vh;
            margin: 0;
            background-color: #f9f9f9;
            font-family: Arial, sans-serif;
        }
        .product-card {
            display: flex;
            flex-direction: column;
            align-items: center;
            background: #fff;
            border-radius: 12px;
            box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
            overflow: hidden;
            transition: transform 0.3s ease-in-out, box-shadow 0.3s ease-in-out;
            width: 300px;
        }
        .product-card:hover {
            transform: scale(1.05);
            box-shadow: 0 8px 20px rgba(0, 0, 0, 0.2);
        }
        .product-image {
            width: 100%;
            height: 200px;
            object-fit: cover;
        }
        .product-info {
            padding: 16px;
            text-align: center;
        }
        .product-title {
            font-size: 1.25rem;
            margin: 0 0 8px;
        }
        .product-price {
            font-size: 1.125rem;
            color: #e60012;
            margin: 0 0 12px;
        }
        .product-button {
            background-color: #007bff;
            color: #fff;
            border: none;
            padding: 8px 16px;
            border-radius: 8px;
            font-size: 1rem;
            cursor: pointer;
            transition: background-color 0.3s ease;
        }
        .product-button:hover {
            background-color: #0056b3;
        }
    </style>
</head>
<body>
    <div class="product-card">
        <img src="https://via.placeholder.com/300x200" alt="商品圖片" class="product-image">
        <div class="product-info">
            <h3 class="product-title">優質商品名稱</h3>
            <p class="product-price">$999</p>
            <button class="product-button">加入購物車</button>
        </div>
    </div>
</body>
</html>

六、切版最佳實踐與心法

善用開發者工具（DevTools）檢查版型
保持程式碼簡潔與結構清晰
模組化 CSS（如 BEM、SCSS）提高維護性

掌握 HTML / CSS 切版技巧需要不斷練習與實作，希望這篇文章能夠幫助你在前端開發的旅程中更上層樓。

【網頁美編的救星！零基礎也能看得懂的 HTML & CSS 網頁設計】

想學做網頁，可是完全不會寫程式，也不知道什麼叫 HTML 和 CSS，市面上的網頁設計書你都看不懂……，先不要放棄！來看看這本！

一、切版前必懂的基本概念

網頁切版是什麼

常見網頁佈局類型與情境範例

二、HTML 基礎結構與語義化

常用標籤與範例

三、CSS 佈局技巧與範例

常用定位方法

Flexbox 完全攻略

Grid 完全攻略

四、響應式設計（RWD）技巧

常用 RWD 設計範例

五、實戰範例

六、切版最佳實踐與心法

【網頁美編的救星！ 零基礎也能看得懂的 HTML & CSS 網頁設計】

Related Posts

發佈留言 取消回覆

【網頁美編的救星！零基礎也能看得懂的 HTML & CSS 網頁設計】

發佈留言取消回覆