«

品字型框架源代码

MitSeek 发布于 阅读：9 

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>品字形布局实现原理</title>
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
            font-family: 'Segoe UI', 'Microsoft YaHei', sans-serif;
        }

        body {
            background-color: #f5f7fa;
            color: #333;
            line-height: 1.6;
            padding: 20px;
            min-height: 100vh;
        }

        .container {
            max-width: 1200px;
            margin: 0 auto;
            display: grid;
            grid-template-columns: 200px 1fr; /* 左侧固定200px，右侧自适应 */
            grid-template-rows: auto 1fr auto; /* 顶部自适应，中间自适应，底部自适应 */
            grid-template-areas:
                "header header"
                "sidebar content"
                "footer footer";
            gap: 20px;
            min-height: 80vh;
        }

        header {
            grid-area: header;
            background: linear-gradient(135deg, #6a11cb 0%, #2575fc 100%);
            color: white;
            padding: 20px;
            border-radius: 8px;
            box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
        }

        .sidebar {
            grid-area: sidebar;
            background: white;
            padding: 20px;
            border-radius: 8px;
            box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
        }

        .content {
            grid-area: content;
            background: white;
            padding: 30px;
            border-radius: 8px;
            box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
        }

        footer {
            grid-area: footer;
            background: #2c3e50;
            color: white;
            padding: 15px;
            text-align: center;
            border-radius: 8px;
        }

        h1, h2, h3 {
            margin-bottom: 15px;
        }

        h1 {
            color: white;
        }

        h2 {
            color: #2c3e50;
            border-bottom: 2px solid #3498db;
            padding-bottom: 10px;
        }

        h3 {
            color: #3498db;
        }

        p {
            margin-bottom: 15px;
        }

        .nav-list {
            list-style: none;
        }

        .nav-list li {
            margin-bottom: 10px;
            padding: 10px 15px;
            border-radius: 5px;
            transition: all 0.3s;
        }

        .nav-list li:hover {
            background-color: #f0f7ff;
        }

        .nav-list a {
            text-decoration: none;
            color: #3498db;
            display: block;
            font-weight: 500;
        }

        .nav-list a:hover {
            color: #2980b9;
        }

        .section-title {
            font-size: 18px;
            color: #2c3e50;
            margin-bottom: 15px;
            padding-bottom: 8px;
            border-bottom: 2px solid #3498db;
        }

        .code-block {
            background: #2d3748;
            color: #e2e8f0;
            padding: 15px;
            border-radius: 5px;
            margin: 15px 0;
            font-family: 'Courier New', monospace;
            overflow-x: auto;
        }

        .example-box {
            background: #f8f9fa;
            border-left: 4px solid #3498db;
            padding: 15px;
            margin: 15px 0;
            border-radius: 0 5px 5px 0;
        }

        .method-tabs {
            display: flex;
            margin-bottom: 20px;
            border-bottom: 1px solid #ddd;
        }

        .method-tab {
            padding: 10px 20px;
            cursor: pointer;
            background: #f1f1f1;
            border: 1px solid #ddd;
            border-bottom: none;
            border-radius: 5px 5px 0 0;
            margin-right: 5px;
        }

        .method-tab.active {
            background: white;
            border-bottom: 1px solid white;
            margin-bottom: -1px;
        }

        .method-content {
            display: none;
        }

        .method-content.active {
            display: block;
        }

        @media (max-width: 768px) {
            .container {
                grid-template-columns: 1fr;
                grid-template-areas:
                    "header"
                    "content"
                    "sidebar"
                    "footer";
            }
        }
    </style>
</head>
<body>
    <div class="container">
        <header>
            <h1>品字形布局实现原理</h1>
            <p>探索CSS Grid、Flexbox和浮动布局的实现方法</p>
        </header>

        <aside class="sidebar">
            <h3 class="section-title">布局方法</h3>
            <ul class="nav-list">
                <li><a href="#" onclick="showMethod('grid')">CSS Grid 布局</a></li>
                <li><a href="#" onclick="showMethod('flexbox')">Flexbox 布局</a></li>
                <li><a href="#" onclick="showMethod('float')">浮动布局</a></li>
                <li><a href="#" onclick="showMethod('comparison')">方法对比</a></li>
            </ul>

            <h3 class="section-title" style="margin-top: 30px;">应用场景</h3>
            <ul class="nav-list">
                <li><a href="#">博客文章页面</a></li>
                <li><a href="#">后台管理系统</a></li>
                <li><a href="#">产品详情页</a></li>
                <li><a href="#">新闻门户</a></li>
            </ul>
        </aside>

        <main class="content">
            <div class="method-tabs">
                <div class="method-tab active" onclick="showMethod('grid')">CSS Grid</div>
                <div class="method-tab" onclick="showMethod('flexbox')">Flexbox</div>
                <div class="method-tab" onclick="showMethod('float')">浮动布局</div>
                <div class="method-tab" onclick="showMethod('comparison')">方法对比</div>
            </div>

            <div id="grid" class="method-content active">
                <h2>CSS Grid 布局实现</h2>
                <p>CSS Grid 是一种二维布局系统，专门用于处理行和列的布局。它是实现品字形布局最直观和强大的方法。</p>

                <div class="example-box">
                    <h3>实现原理</h3>
                    <p>通过定义网格容器和网格区域，可以精确控制每个元素的位置和大小。</p>
                </div>

                <h3>核心代码</h3>
                <div class="code-block">
.container {<br>
  display: grid;<br>
  grid-template-columns: 200px 1fr; /* 左侧固定宽度，右侧自适应 */<br>
  grid-template-rows: auto 1fr auto; /* 顶部自适应，中间自适应，底部自适应 */<br>
  grid-template-areas:<br>
    "header header"<br>
    "sidebar content"<br>
    "footer footer";<br>
  gap: 20px;<br>
}<br>
<br>
header { grid-area: header; }<br>
.sidebar { grid-area: sidebar; }<br>
.content { grid-area: content; }<br>
footer { grid-area: footer; }
                </div>

                <h3>优点</h3>
                <ul>
                    <li>代码简洁直观</li>
                    <li>强大的二维布局能力</li>
                    <li>响应式设计容易实现</li>
                    <li>对齐和间距控制精确</li>
                </ul>
            </div>

            <div id="flexbox" class="method-content">
                <h2>Flexbox 布局实现</h2>
                <p>Flexbox 是一种一维布局模型，适合处理单行或单列的布局。通过嵌套Flex容器可以实现品字形布局。</p>

                <div class="example-box">
                    <h3>实现原理</h3>
                    <p>使用外层Flex容器控制垂直方向布局，内层Flex容器控制水平方向布局。</p>
                </div>

                <h3>核心代码</h3>
                <div class="code-block">
.container {<br>
  display: flex;<br>
  flex-direction: column;<br>
  min-height: 100vh;<br>
}<br>
<br>
.content-wrapper {<br>
  display: flex;<br>
  flex: 1;<br>
}<br>
<br>
.sidebar {<br>
  width: 200px;<br>
}<br>
<br>
.content {<br>
  flex: 1;<br>
}
                </div>

                <h3>优点</h3>
                <ul>
                    <li>浏览器兼容性好</li>
                    <li>灵活的内容对齐方式</li>
                    <li>适合单维度布局</li>
                </ul>
            </div>

            <div id="float" class="method-content">
                <h2>浮动布局实现</h2>
                <p>浮动布局是传统的布局方法，通过元素的浮动和清除浮动来实现布局效果。</p>

                <div class="example-box">
                    <h3>实现原理</h3>
                    <p>左侧元素设置浮动，右侧元素通过外边距避开浮动元素。</p>
                </div>

                <h3>核心代码</h3>
                <div class="code-block">
.sidebar {<br>
  float: left;<br>
  width: 200px;<br>
}<br>
<br>
.content {<br>
  margin-left: 220px; /* 侧边栏宽度 + 间距 */<br>
}<br>
<br>
/* 清除浮动 */<br>
.container::after {<br>
  content: "";<br>
  display: table;<br>
  clear: both;<br>
}
                </div>

                <h3>优点</h3>
                <ul>
                    <li>兼容性最好，支持老版本浏览器</li>
                    <li>开发者熟悉度高</li>
                </ul>
            </div>

            <div id="comparison" class="method-content">
                <h2>布局方法对比</h2>
                <p>不同的布局方法各有优缺点，适用于不同的场景。</p>

                <div class="example-box">
                    <h3>选择建议</h3>
                    <p>根据项目需求、浏览器兼容性要求和开发团队技能选择合适的布局方法。</p>
                </div>

                <h3>方法对比表</h3>
                <table style="width: 100%; border-collapse: collapse; margin: 20px 0;">
                    <thead>
                        <tr style="background: #f1f1f1;">
                            <th style="padding: 10px; text-align: left; border: 1px solid #ddd;">特性</th>
                            <th style="padding: 10px; text-align: left; border: 1px solid #ddd;">CSS Grid</th>
                            <th style="padding: 10px; text-align: left; border: 1px solid #ddd;">Flexbox</th>
                            <th style="padding: 10px; text-align: left; border: 1px solid #ddd;">浮动布局</th>
                        </tr>
                    </thead>
                    <tbody>
                        <tr>
                            <td style="padding: 10px; border: 1px solid #ddd;">布局维度</td>
                            <td style="padding: 10px; border: 1px solid #ddd;">二维</td>
                            <td style="padding: 10px; border: 1px solid #ddd;">一维</td>
                            <td style="padding: 10px; border: 1px solid #ddd;">一维</td>
                        </tr>
                        <tr>
                            <td style="padding: 10px; border: 1px solid #ddd;">浏览器兼容性</td>
                            <td style="padding: 10px; border: 1px solid #ddd;">现代浏览器</td>
                            <td style="padding: 10px; border: 1px solid #ddd;">良好</td>
                            <td style="padding: 10px; border: 1px solid #ddd;">所有浏览器</td>
                        </tr>
                        <tr>
                            <td style="padding: 10px; border: 1px solid #ddd;">学习曲线</td>
                            <td style="padding: 10px; border: 1px solid #ddd;">中等</td>
                            <td style="padding: 10px; border: 1px solid #ddd;">简单</td>
                            <td style="padding: 10px; border: 1px solid #ddd;">简单</td>
                        </tr>
                        <tr>
                            <td style="padding: 10px; border: 1px solid #ddd;">代码简洁性</td>
                            <td style="padding: 10px; border: 1px solid #ddd;">高</td>
                            <td style="padding: 10px; border: 1px solid #ddd;">中等</td>
                            <td style="padding: 10px; border: 1px solid #ddd;">低</td>
                        </tr>
                    </tbody>
                </table>

                <h3>推荐使用场景</h3>
                <ul>
                    <li><strong>CSS Grid</strong>：复杂的二维布局，如仪表板、图片库</li>
                    <li><strong>Flexbox</strong>：一维布局，如导航栏、卡片列表</li>
                    <li><strong>浮动布局</strong>：传统项目，需要兼容老浏览器</li>
                </ul>
            </div>
        </main>

        <footer>
            <p>品字形布局实现原理 © 2023 - 使用CSS Grid、Flexbox和浮动布局</p>
        </footer>
    </div>

    <script>
        function showMethod(method) {
            // 隐藏所有内容
            document.querySelectorAll('.method-content').forEach(content => {
                content.classList.remove('active');
            });

            // 移除所有标签的活动状态
            document.querySelectorAll('.method-tab').forEach(tab => {
                tab.classList.remove('active');
            });

            // 显示选中的内容
            document.getElementById(method).classList.add('active');

            // 设置对应标签为活动状态
            event.target.classList.add('active');
        }
    </script>
</body>
</html>

CMS