6月22日笔记

html的几种布局：
代码演示：
点击查看代码
<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>6 种常见 CSS 页面布局</title>
    <style>
        /* ----- 全局重置 & 基础 ----- */
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

        body {
            font-family: 'Segoe UI', Roboto, system-ui, sans-serif;
            background: #f3f7fb;
            min-height: 100vh;
            display: flex;
            justify-content: center;
            align-items: center;
            padding: 2rem 1rem;
        }

        .container {
            max-width: 1000px;
            width: 100%;
            background: #ffffff;
            border-radius: 2rem;
            box-shadow: 0 20px 50px rgba(0, 0, 0, 0.08);
            overflow: hidden;
            padding: 1.8rem 2rem 2.5rem;
        }

        h1 {
            font-weight: 600;
            font-size: 1.8rem;
            color: #0b1e2e;
            margin-bottom: 0.2rem;
        }

        .sub {
            color: #647a8f;
            font-size: 0.95rem;
            margin-bottom: 2rem;
            border-left: 4px solid #b6ccdf;
            padding-left: 1rem;
        }

        /* ----- 选项卡导航 ----- */
        .tabs-nav {
            display: flex;
            flex-wrap: wrap;
            gap: 0.3rem 0.2rem;
            margin-bottom: 2rem;
            border-bottom: 2px solid #e4ecf5;
            padding-bottom: 0.2rem;
        }

        .tab-btn {
            padding: 0.5rem 1.2rem;
            border: none;
            background: transparent;
            font-size: 0.9rem;
            font-weight: 500;
            color: #4f657c;
            border-radius: 30px 30px 0 0;
            cursor: pointer;
            transition: all 0.2s;
            border-bottom: 3px solid transparent;
        }

        .tab-btn:hover {
            background: rgba(31, 58, 95, 0.05);
            color: #1a2b3e;
        }

        .tab-btn.active {
            background: #ffffff;
            color: #0b1e2e;
            border-bottom-color: #1f3a5f;
            font-weight: 600;
        }

        /* ----- 面板容器 ----- */
        .panels {
            position: relative;
        }

        .panel {
            display: none;
            animation: fade 0.3s ease;
        }

        .panel.active {
            display: block;
        }

        @keyframes fade {
            0% { opacity: 0; transform: translateY(8px); }
            100% { opacity: 1; transform: translateY(0); }
        }

        .panel-title {
            font-weight: 600;
            font-size: 1.2rem;
            margin-bottom: 0.4rem;
            color: #1f3a5f;
        }

        .panel-desc {
            color: #5c738a;
            font-size: 0.9rem;
            margin-bottom: 1.2rem;
            border-left: 3px solid #d0dfec;
            padding-left: 0.8rem;
        }

        /* ----- 布局演示样式 (每种布局通用组件) ----- */
        .layout-demo {
            display: flex;
            flex-direction: column;
            gap: 0.6rem;
            background: #fafdff;
            border-radius: 1.2rem;
            padding: 0.8rem;
            border: 1px solid #e4edf6;
            min-height: 280px;
            /* 内部布局由具体类控制 */;
        }

        /* 头部 & 页脚 */
        .layout-header,
        .layout-footer {
            background: #1f3a5f;
            color: #fff;
            padding: 0.8rem 1.2rem;
            border-radius: 0.6rem;
            font-weight: 500;
            text-align: center;
        }
        .layout-footer {
            background: #2c4a6e;
        }

        /* 导航 */
        .layout-nav {
            background: #e8eff7;
            padding: 0.6rem 1rem;
            border-radius: 0.6rem;
            display: flex;
            gap: 1.5rem;
            flex-wrap: wrap;
            font-weight: 500;
            color: #1f3a5f;
        }
        .layout-nav span {
            opacity: 0.7;
        }

        /* 主体区域 (用于 flex/grid) */
        .layout-main {
            background: #ffffff;
            border: 1px dashed #b6ccdf;
            border-radius: 0.6rem;
            padding: 1rem;
            flex: 1;
            min-height: 120px;
        }

        .layout-sidebar {
            background: #f0f6fd;
            border-radius: 0.6rem;
            padding: 1rem;
            border: 1px solid #dce8f2;
        }

        /* 网格卡片专用 */
        .card-grid {
            display: grid;
            grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
            gap: 1rem;
        }
        .card-item {
            background: #ffffff;
            border: 1px solid #dee9f2;
            border-radius: 0.8rem;
            padding: 1.2rem 0.8rem;
            text-align: center;
            box-shadow: 0 2px 6px rgba(0,0,0,0.02);
        }
        .card-item .icon {
            font-size: 2rem;
            display: block;
            margin-bottom: 0.3rem;
        }

        /* ----- 具体布局类 (Flex / Grid) ----- */

        /* 1. 单列 */
        .layout-single {
            display: flex;
            flex-direction: column;
            gap: 0.6rem;
        }

        /* 2. 两列 (左主右侧) */
        .layout-two-left {
            display: flex;
            gap: 0.8rem;
            flex-wrap: wrap;
        }
        .layout-two-left .layout-main {
            flex: 2;
            min-width: 180px;
        }
        .layout-two-left .layout-sidebar {
            flex: 1;
            min-width: 120px;
        }

        /* 3. 两列 (左侧边栏+主内容) */
        .layout-two-right {
            display: flex;
            gap: 0.8rem;
            flex-wrap: wrap;
        }
        .layout-two-right .layout-sidebar {
            flex: 1;
            min-width: 120px;
            order: -1; /* 侧边栏在左 */
        }
        .layout-two-right .layout-main {
            flex: 2;
            min-width: 180px;
        }

        /* 4. 三列 (左中右) */
        .layout-three {
            display: flex;
            gap: 0.8rem;
            flex-wrap: wrap;
        }
        .layout-three .layout-sidebar {
            flex: 1;
            min-width: 100px;
        }
        .layout-three .layout-main {
            flex: 2;
            min-width: 150px;
        }
        .layout-three .layout-sidebar:last-child {
            background: #eaf1fa;
        }

        /* 5. 圣杯布局 (使用flex, 中间自适应) */
        .layout-holy {
            display: flex;
            flex-direction: column;
            gap: 0.6rem;
        }
        .holy-body {
            display: flex;
            gap: 0.8rem;
            flex-wrap: wrap;
        }
        .holy-body .layout-main {
            flex: 1;
            order: 2;
            min-width: 150px;
        }
        .holy-body .layout-sidebar {
            flex: 0 0 120px;
            order: 1;
        }
        .holy-body .layout-sidebar:last-child {
            flex: 0 0 120px;
            order: 3;
            background: #eaf1fa;
        }

        /* 6. 网格卡片 (已经用 .card-grid) */
        .layout-grid .card-grid {
            margin-top: 0.4rem;
        }

        /* ----- 响应式微调 ----- */
        @media (max-width: 600px) {
            .container { padding: 1.2rem; }
            .tab-btn { padding: 0.3rem 0.8rem; font-size: 0.8rem; }
            .layout-two-left, .layout-two-right, .layout-three, .holy-body {
                flex-direction: column;
            }
            .holy-body .layout-sidebar {
                flex: 1 1 auto;
                order: 0 !important;
            }
            .holy-body .layout-main {
                order: 0 !important;
            }
            .layout-sidebar {
                min-width: auto !important;
            }
        }
    </style>
</head>
<body>
<div class="container">
    <h1>🧩 常见页面布局结构</h1>
    <div class="sub">点击选项卡切换 · 每种布局都包含头部、导航、内容区、侧边栏（可选）和页脚</div>

    <!-- 选项卡导航 -->
    <div class="tabs-nav">
        <button class="tab-btn active" data-tab="p1">① 单列</button>
        <button class="tab-btn" data-tab="p2">② 两列 (主+侧)</button>
        <button class="tab-btn" data-tab="p3">③ 两列 (侧+主)</button>
        <button class="tab-btn" data-tab="p4">④ 三列</button>
        <button class="tab-btn" data-tab="p5">⑤ 圣杯</button>
        <button class="tab-btn" data-tab="p6">⑥ 网格卡片</button>
    </div>

    <!-- 面板 -->
    <div class="panels">
        <!-- 面板1: 单列 -->
        <div id="p1" class="panel active">
            <div class="panel-title">📄 单列布局</div>
            <div class="panel-desc">垂直流式，适合博客、文章页。所有内容按顺序排列。</div>
            <div class="layout-demo layout-single">
                <div class="layout-header">头部 Header</div>
                <div class="layout-nav"><span>首页</span> <span>文章</span> <span>关于</span></div>
                <div class="layout-main" style="min-height:150px;">
                    <strong>主内容区域</strong><br />
                    这里是文章正文、图片或其他内容。
                </div>
                <div class="layout-footer">页脚 Footer © 2026</div>
            </div>
        </div>

        <!-- 面板2: 两列 (左主右侧) -->
        <div id="p2" class="panel">
            <div class="panel-title">📰 两列布局（主内容 + 右侧边栏）</div>
            <div class="panel-desc">左侧主内容区（flex:2），右侧侧边栏（flex:1），常见于博客。</div>
            <div class="layout-demo layout-two-left">
                <div class="layout-header" style="flex:0 0 100%;">头部 Header</div>
                <div class="layout-nav" style="flex:0 0 100%;"><span>首页</span> <span>分类</span> <span>标签</span></div>
                <div class="layout-main"><strong>主内容</strong><br />文章列表或详细内容。</div>
                <div class="layout-sidebar"><strong>侧边栏</strong><br />热门文章、广告等。</div>
                <div class="layout-footer" style="flex:0 0 100%;">页脚 Footer</div>
            </div>
        </div>

        <!-- 面板3: 两列 (左侧边栏+主内容) -->
        <div id="p3" class="panel">
            <div class="panel-title">📰 两列布局（左侧边栏 + 主内容）</div>
            <div class="panel-desc">侧边栏在左，主内容在右，同样使用flex。</div>
            <div class="layout-demo layout-two-right">
                <div class="layout-header" style="flex:0 0 100%;">头部 Header</div>
                <div class="layout-nav" style="flex:0 0 100%;"><span>首页</span> <span>产品</span> <span>联系</span></div>
                <div class="layout-sidebar"><strong>侧边栏</strong><br />导航菜单或个人信息。</div>
                <div class="layout-main"><strong>主内容</strong><br />产品展示或详细描述。</div>
                <div class="layout-footer" style="flex:0 0 100%;">页脚 Footer</div>
            </div>
        </div>

        <!-- 面板4: 三列 -->
        <div id="p4" class="panel">
            <div class="panel-title">📊 三列布局（左中右）</div>
            <div class="panel-desc">三个并排区域：左侧边栏、主内容、右侧边栏。</div>
            <div class="layout-demo layout-three">
                <div class="layout-header" style="flex:0 0 100%;">头部 Header</div>
                <div class="layout-nav" style="flex:0 0 100%;"><span>导航1</span> <span>导航2</span> <span>导航3</span></div>
                <div class="layout-sidebar"><strong>左侧栏</strong><br />分类目录</div>
                <div class="layout-main"><strong>主内容</strong><br />核心内容区域</div>
                <div class="layout-sidebar"><strong>右侧栏</strong><br />广告、标签云</div>
                <div class="layout-footer" style="flex:0 0 100%;">页脚 Footer</div>
            </div>
        </div>

        <!-- 面板5: 圣杯布局 -->
        <div id="p5" class="panel">
            <div class="panel-title">🏆 圣杯布局 (Holy Grail)</div>
            <div class="panel-desc">经典三列布局：中间主内容自适应，左右侧边栏固定宽度，且主内容在DOM中优先。</div>
            <div class="layout-demo layout-holy">
                <div class="layout-header">头部 Header</div>
                <div class="layout-nav"><span>主页</span> <span>博客</span> <span>项目</span></div>
                <div class="holy-body">
                    <div class="layout-sidebar"><strong>左侧栏</strong><br />固定宽度 120px</div>
                    <div class="layout-main"><strong>主内容 (自适应)</strong><br />这是圣杯布局的核心区域，宽度自动填充剩余空间。</div>
                    <div class="layout-sidebar"><strong>右侧栏</strong><br />固定宽度 120px</div>
                </div>
                <div class="layout-footer">页脚 Footer</div>
            </div>
        </div>

        <!-- 面板6: 网格卡片 -->
        <div id="p6" class="panel">
            <div class="panel-title">📱 网格卡片布局 (CSS Grid)</div>
            <div class="panel-desc">使用 Grid 自动创建响应式卡片，非常适合产品展示、图片库。</div>
            <div class="layout-demo layout-grid">
                <div class="layout-header" style="flex:0 0 100%;">头部 Header</div>
                <div class="layout-nav" style="flex:0 0 100%;"><span>全部</span> <span>热门</span> <span>最新</span></div>
                <div class="card-grid">
                    <div class="card-item"><span class="icon">📘</span>卡片 1</div>
                    <div class="card-item"><span class="icon">📗</span>卡片 2</div>
                    <div class="card-item"><span class="icon">📕</span>卡片 3</div>
                    <div class="card-item"><span class="icon">📙</span>卡片 4</div>
                    <div class="card-item"><span class="icon">📔</span>卡片 5</div>
                    <div class="card-item"><span class="icon">📓</span>卡片 6</div>
                </div>
                <div class="layout-footer" style="flex:0 0 100%;">页脚 Footer</div>
            </div>
        </div>
    </div>
</div>

<script>
    (function() {
        const buttons = document.querySelectorAll('.tab-btn');
        const panels = document.querySelectorAll('.panel');

        function switchTab(tabId) {
            // 更新按钮状态
            buttons.forEach(btn => {
                btn.classList.toggle('active', btn.dataset.tab === tabId);
            });
            // 更新面板
            panels.forEach(p => {
                p.classList.toggle('active', p.id === tabId);
            });
        }

        buttons.forEach(btn => {
            btn.addEventListener('click', function(e) {
                switchTab(this.dataset.tab);
            });
        });

        // 默认第一个激活
    })();
</script>
</body>
</html>
效果图展示：
posted @ 2026-07-09 08:43 createcoding 阅读(71) 评论(0) 收藏举报
刷新页面返回顶部
6月22日笔记

公告
