常见的 HTML 排版技巧(超全面-附代码)

光头程序员em

于 2025-02-12 08:29:30 发布

阅读量533

点赞数 3

文章标签： html 前端

本文链接：https://blog.youkuaiyun.com/lienmiao/article/details/145583674

版权

常见的 HTML 排版技巧(超全面-附代码)

收藏不迷路

合理使用 HTML 标签

1. 语义化标签

使用 HTML5 提供的语义化标签可以让代码结构更清晰，有利于搜索引擎优化（SEO）和屏幕阅读器等辅助设备理解页面内容。

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>语义化标签示例</title>
</head>

<body>
    <!-- 页面头部 -->
    <header>
        <h1>网站标题</h1>
        <nav>
            <ul>
                <li><a href="#">首页</a></li>
                <li><a href="#">关于我们</a></li>
                <li><a href="#">联系我们</a></li>
            </ul>
        </nav>
    </header>
    <!-- 页面主要内容 -->
    <main>
        <article>
            <h2>文章标题</h2>
            <p>文章内容...</p>
        </article>
    </main>
    <!-- 页面底部 -->
    <footer>
        <p>版权所有 &copy; 2025</p>
    </footer>
</body>

</html>

2. 标题标签

使用 <h1> - <h6> 标签来组织页面的标题结构，<h1> 通常用于页面的主标题，其他标题标签用于子标题，标题的层级关系有助于搜索引擎理解页面的内容层次。

元素布局

1. 表格布局（适用于展示表格数据）

使用 <table>、<tr>、<td> 等标签来创建表格。

<table border="1">
    <tr>
        <th>姓名</th>
        <th>年龄</th>
        <th>性别</th>
    </tr>
    <tr>
        <td>张三</td>
        <td>25</td>
        <td>男</td>
    </tr>
    <tr>
        <td>李四</td>
        <td>23</td>
        <td>女</td>
    </tr>
</table>

2. 列表布局

有序列表使用 <ol> 和 <li> 标签，无序列表使用 <ul> 和 <li> 标签。

<!-- 无序列表 -->
<ul>
    <li>苹果</li>
    <li>香蕉</li>
    <li>橙子</li>
</ul>
<!-- 有序列表 -->
<ol>
    <li>第一步</li>
    <li>第二步</li>
    <li>第三步</li>
</ol>

盒子模型与元素间距

虽然盒子模型和元素间距主要通过 CSS 来控制，但 HTML 结构的设计也会影响最终的排版效果。

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>盒子模型示例</title>
    <style>
        .box {
            width: 200px;
            padding: 20px;
            border: 1px solid #ccc;
            margin: 20px;
        }
    </style>
</head>

<body>
    <div class="box">
        <p>这是一个带有内边距、边框和外边距的盒子。</p>
    </div>
</body>

</html>

响应式设计基础

使用 <meta> 标签设置视口，让页面在不同设备上有更好的显示效果。

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>响应式设计示例</title>
    <style>
        @media (max-width: 600px) {
            body {
                background-color: lightblue;
            }
        }
    </style>
</head>

<body>
    <p>当屏幕宽度小于 600px 时，背景颜色会变为浅蓝色。</p>
</body>

</html>

嵌套与分组元素

使用 <div> 和 <span> 标签来对元素进行分组和嵌套，以便更好地组织页面结构和应用样式。

<div class="section">
    <h2>分组标题</h2>
    <p>这是分组内的段落。</p>
    <span style="color: red;">这是一个内联文本。</span>
</div>

浮动与清除浮动

在 HTML 排版中，浮动（float）是一种常用的布局技术，可让元素向左或向右浮动，使其他元素环绕它排列。不过使用浮动后，可能会导致父元素高度塌陷，此时就需要清除浮动。

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>浮动与清除浮动示例</title>
    <style>
        .parent {
            border: 1px solid #000;
            /* 清除浮动的一种方式：使用 overflow 属性 */
            overflow: auto;
        }

        .float-left {
            float: left;
            width: 100px;
            height: 100px;
            background-color: lightcoral;
        }

        .float-right {
            float: right;
            width: 100px;
            height: 100px;
            background-color: lightgreen;
        }
    </style>
</head>

<body>
    <div class="parent">
        <div class="float-left"></div>
        <div class="float-right"></div>
        <!-- 内容会环绕浮动元素 -->
        <p>这里是一些文本内容，它会环绕在浮动元素的周围。</p>
    </div>
</body>

</html>

弹性布局（Flexbox）

Flexbox 是一种现代的布局模型，提供了强大的对齐和分布元素的能力，能让元素在不同屏幕尺寸下更灵活地排列。

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Flexbox 布局示例</title>
    <style>
        .flex-container {
            display: flex;
            /* 定义主轴方向 */
            flex-direction: row;
            /* 定义元素在主轴上的对齐方式 */
            justify-content: space-around;
            /* 定义元素在交叉轴上的对齐方式 */
            align-items: center;
            background-color: lightgray;
            height: 200px;
        }

        .flex-item {
            width: 50px;
            height: 50px;
            background-color: dodgerblue;
            color: white;
            text-align: center;
            line-height: 50px;
        }
    </style>
</head>

<body>
    <div class="flex-container">
        <div class="flex-item">1</div>
        <div class="flex-item">2</div>
        <div class="flex-item">3</div>
    </div>
</body>

</html>

网格布局（Grid）

Grid 布局是一种二维布局模型，允许你将页面划分为行和列，更方便地创建复杂的布局。

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Grid 布局示例</title>
    <style>
        .grid-container {
            display: grid;
            /* 定义列的宽度 */
            grid-template-columns: repeat(3, 1fr);
            /* 定义行的高度 */
            grid-template-rows: repeat(2, 100px);
            /* 定义网格项之间的间距 */
            gap: 10px;
            background-color: lightyellow;
            padding: 10px;
        }

        .grid-item {
            background-color: orange;
            color: white;
            text-align: center;
            line-height: 100px;
        }
    </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>

媒体查询优化排版

媒体查询允许根据设备的屏幕尺寸、分辨率等特性应用不同的 CSS 样式，从而实现响应式排版。

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>媒体查询示例</title>
    <style>
        body {
            font-size: 16px;
        }

        /* 当屏幕宽度小于 600px 时应用以下样式 */
        @media (max-width: 600px) {
            body {
                font-size: 14px;
            }

            h1 {
                font-size: 20px;
            }
        }

        /* 当屏幕宽度大于 1200px 时应用以下样式 */
        @media (min-width: 1200px) {
            body {
                font-size: 18px;
            }

            h1 {
                font-size: 32px;
            }
        }
    </style>
</head>

<body>
    <h1>响应式排版标题</h1>
    <p>这是一段文本内容，根据不同的屏幕尺寸，字体大小会有所变化。</p>
</body>

</html>

无障碍排版

确保网页内容对所有用户都可访问是很重要的。可以使用 HTML 的 alt 属性为图片添加替代文本，为表单元素添加 label 标签等。

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>无障碍排版示例</title>
</head>

<body>
    <!-- 为图片添加 alt 属性 -->
    <img src="example.jpg" alt="示例图片：美丽的风景">
    <!-- 为表单元素添加 label 标签 -->
    <form>
        <label for="username">用户名：</label>
        <input type="text" id="username" name="username"><br>
        <label for="password">密码：</label>
        <input type="password" id="password" name="password"><br>
        <input type="submit" value="提交">
    </form>
</body>

</html>

嵌套布局组合使用

在实际的网页排版中，常常会将多种布局方式嵌套使用，以实现复杂而灵活的页面结构。例如，在一个使用 Grid 布局的容器内嵌套 Flexbox 布局的子容器。

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>嵌套布局示例</title>
    <style>
        .grid-container {
            display: grid;
            grid-template-columns: repeat(2, 1fr);
            gap: 20px;
            background-color: #f0f0f0;
            padding: 20px;
        }

        .flex-container {
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            background-color: #e0e0e0;
            padding: 20px;
        }

        .item {
            background-color: #b0c4de;
            padding: 10px;
            margin: 5px;
            width: 80%;
            text-align: center;
        }
    </style>
</head>

<body>
    <div class="grid-container">
        <div class="flex-container">
            <div class="item">Flex Item 1</div>
            <div class="item">Flex Item 2</div>
        </div>
        <div class="flex-container">
            <div class="item">Flex Item 3</div>
            <div class="item">Flex Item 4</div>
        </div>
    </div>
</body>

</html>

滚动与溢出处理

当内容超出容器的大小时，合理处理滚动和溢出情况能提升用户体验。可以使用 CSS 的 overflow 属性来控制。

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>滚动与溢出处理示例</title>
    <style>
        .scroll-container {
            width: 200px;
            height: 150px;
            border: 1px solid #ccc;
            /* 当内容溢出时显示滚动条 */
            overflow: auto;
        }
    </style>
</head>

<body>
    <div class="scroll-container">
        <p>这里是一段很长的文本内容，用于测试滚动和溢出处理。这里是一段很长的文本内容，用于测试滚动和溢出处理。这里是一段很长的文本内容，用于测试滚动和溢出处理。这里是一段很长的文本内容，用于测试滚动和溢出处理。</p>
    </div>
</body>

</html>

垂直居中排版

垂直居中元素是排版中常见的需求，有多种方法可以实现，以下是使用 Flexbox 实现垂直居中的示例。

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>垂直居中示例</title>
    <style>
        .center-container {
            display: flex;
            justify-content: center;
            align-items: center;
            height: 300px;
            background-color: #f5f5f5;
        }

        .centered-item {
            background-color: #add8e6;
            padding: 20px;
        }
    </style>
</head>

<body>
    <div class="center-container">
        <div class="centered-item">
            <p>这是一个垂直居中的元素。</p>
        </div>
    </div>
</body>

</html>

多列布局

使用 CSS 的多列布局可以将文本内容分成多列显示，常用于报纸、杂志风格的排版。

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>多列布局示例</title>
    <style>
        .multi-column {
            /* 定义列数 */
            columns: 3;
            /* 定义列之间的间距 */
            column-gap: 20px;
            /* 定义列之间的分隔线 */
            column-rule: 1px solid #ccc;
        }
    </style>
</head>

<body>
    <div class="multi-column">
        <p>这里是一段用于多列布局测试的文本内容。这里是一段用于多列布局测试的文本内容。这里是一段用于多列布局测试的文本内容。这里是一段用于多列布局测试的文本内容。这里是一段用于多列布局测试的文本内容。这里是一段用于多列布局测试的文本内容。</p>
    </div>
</body>

</html>

粘性定位排版

粘性定位（sticky）可以让元素在滚动时固定在某个位置，常用于导航栏、侧边栏等。

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>粘性定位示例</title>
    <style>
        body {
            height: 2000px;
        }

        .sticky-nav {
            position: sticky;
            top: 0;
            background-color: #333;
            color: white;
            padding: 10px;
        }
    </style>
</head>

<body>
    <div class="sticky-nav">
        <ul>
            <li><a href="#">首页</a></li>
            <li><a href="#">关于我们</a></li>
            <li><a href="#">联系我们</a></li>
        </ul>
    </div>
    <p>这里是一些很长的文本内容，用于测试粘性定位效果。这里是一些很长的文本内容，用于测试粘性定位效果。这里是一些很长的文本内容，用于测试粘性定位效果。</p>
</body>

</html>

响应式图片排版

在不同设备上，图片的显示效果和尺寸需求不同。使用 HTML5 的 <picture> 元素和 srcset 属性可以实现响应式图片排版，根据设备的屏幕尺寸、分辨率等加载合适的图片。

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>响应式图片排版示例</title>
</head>

<body>
    <picture>
        <!-- 当屏幕宽度大于等于 1200px 时，加载 large.jpg -->
        <source media="(min-width: 1200px)" srcset="large.jpg">
        <!-- 当屏幕宽度大于等于 768px 时，加载 medium.jpg -->
        <source media="(min-width: 768px)" srcset="medium.jpg">
        <!-- 其他情况加载 small.jpg -->
        <img src="small.jpg" alt="响应式图片">
    </picture>
</body>

</html>

伪元素排版技巧

伪元素（如 ::before 和 ::after）可以在不改变 HTML 结构的情况下添加额外的内容和样式，常用于装饰性元素、清除浮动等。

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>伪元素排版示例</title>
    <style>
        .quote {
            position: relative;
            padding-left: 30px;
            font-style: italic;
        }

        .quote::before {
            content: "“";
            position: absolute;
            left: 0;
            top: -10px;
            font-size: 40px;
            color: #999;
        }
    </style>
</head>

<body>
    <p class="quote">这是一段引用的话语，通过伪元素添加了引号装饰。</p>
</body>

</html>

视口单位排版

视口单位（如 vw、vh、vmin、vmax）是相对于浏览器视口大小的单位，使用视口单位可以实现与视口相关的排版，使页面在不同设备上有更好的适配性。

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>视口单位排版示例</title>
    <style>
        .viewport-box {
            width: 50vw;
            height: 30vh;
            background-color: lightgreen;
            margin: 0 auto;
            text-align: center;
            line-height: 30vh;
        }
    </style>
</head>

<body>
    <div class="viewport-box">
        <p>这个盒子的宽度是视口宽度的 50%，高度是视口高度的 30%。</p>
    </div>
</body>

</html>

利用 HTML5 的 `<canvas>` 元素进行排版

<canvas> 元素可以用于动态绘制图形、动画等，在排版中可以实现一些独特的视觉效果。

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Canvas 排版示例</title>
    <style>
        canvas {
            border: 1px solid #ccc;
        }
    </style>
</head>

<body>
    <canvas id="myCanvas" width="400" height="200"></canvas>
    <script>
        const canvas = document.getElementById('myCanvas');
        const ctx = canvas.getContext('2d');
        ctx.fillStyle = 'lightblue';
        ctx.fillRect(50, 50, 100, 100);
    </script>
</body>

</html>

排版中的过渡与动画效果

结合 CSS 的过渡（transition）和动画（animation）属性，可以为排版元素添加动态效果，增强用户体验。

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>排版动画示例</title>
    <style>
        .animated-box {
            width: 100px;
            height: 100px;
            background-color: orange;
            /* 添加过渡效果 */
            transition: width 1s, height 1s, background-color 1s;
        }

        .animated-box:hover {
            width: 200px;
            height: 200px;
            background-color: purple;
        }

        @keyframes slide {
            from {
                margin-left: 0;
            }
            to {
                margin-left: 200px;
            }
        }

        .sliding-box {
            width: 50px;
            height: 50px;
            background-color: pink;
            /* 添加动画效果 */
            animation: slide 2s infinite alternate;
        }
    </style>
</head>

<body>
    <div class="animated-box"></div>
    <div class="sliding-box"></div>
</body>

</html>

排版的可访问性优化

除了前面提到的添加 alt 属性和 label 标签，还可以使用 ARIA（Accessible Rich Internet Applications）属性来进一步提升网页排版的可访问性，帮助屏幕阅读器等辅助设备更好地理解页面内容。

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>可访问性排版示例</title>
</head>

<body>
    <button aria-label="返回首页">返回</button>
    <div role="region" aria-label="重要通知">
        <p>这里是一条重要通知内容。</p>
    </div>
</body>

</html>

瀑布流布局排版

瀑布流布局是一种流行的网页排版方式，常用于图片展示类网站，它的特点是元素高度参差不齐，像瀑布一样垂直排列。可以使用 JavaScript 或 CSS 来实现。以下是使用 CSS 结合 column-count 实现简单瀑布流布局的示例：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>瀑布流布局示例</title>
    <style>
        .masonry {
            column-count: 3;
            column-gap: 10px;
        }

        .item {
            display: inline-block;
            width: 100%;
            margin-bottom: 10px;
            break-inside: avoid;
            background-color: #f0f0f0;
            padding: 10px;
        }
    </style>
</head>

<body>
    <div class="masonry">
        <div class="item">
            <p>内容 1：这是一段简短的文本内容。</p>
        </div>
        <div class="item">
            <p>内容 2：这是一段稍微长一点的文本内容，用于展示不同高度的元素效果。这是一段稍微长一点的文本内容，用于展示不同高度的元素效果。</p>
        </div>
        <div class="item">
            <p>内容 3：简短内容。</p>
        </div>
        <div class="item">
            <p>内容 4：这是一段很长的文本内容，用于展示不同高度的元素效果。这是一段很长的文本内容，用于展示不同高度的元素效果。这是一段很长的文本内容，用于展示不同高度的元素效果。</p>
        </div>
        <div class="item">
            <p>内容 5：简短文本。</p>
        </div>
    </div>
</body>

</html>

等高列布局排版

在某些情况下，需要让同一行的多个列具有相同的高度，即使它们的内容不同。可以使用 Flexbox 或 Grid 布局来实现等高列。

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>等高列布局示例</title>
    <style>
        .equal-height-container {
            display: flex;
        }

        .column {
            flex: 1;
            background-color: #e0e0e0;
            padding: 20px;
            margin: 10px;
        }
    </style>
</head>

<body>
    <div class="equal-height-container">
        <div class="column">
            <p>这是第一列的内容，可能比较短。</p>
        </div>
        <div class="column">
            <p>这是第二列的内容，相对较长一些。这是第二列的内容，相对较长一些。这是第二列的内容，相对较长一些。</p>
        </div>
        <div class="column">
            <p>这是第三列的内容，长度适中。</p>
        </div>
    </div>
</body>

</html>

卡片式排版

卡片式排版在现代网页设计中非常常见，它将信息分组在一个个卡片中，使页面看起来整洁、有条理。

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>卡片式排版示例</title>
    <style>
        .card-container {
            display: flex;
            flex-wrap: wrap;
            justify-content: center;
        }

        .card {
            width: 300px;
            border: 1px solid #ccc;
            border-radius: 5px;
            margin: 10px;
            overflow: hidden;
        }

        .card-img {
            width: 100%;
            height: 200px;
            object-fit: cover;
        }

        .card-content {
            padding: 10px;
        }
    </style>
</head>

<body>
    <div class="card-container">
        <div class="card">
            <img class="card-img" src="./img.png" alt="卡片图片">
            <div class="card-content">
                <h3>卡片标题 1</h3>
                <p>这是卡片的内容描述。这是卡片的内容描述。</p>
            </div>
        </div>
        <div class="card">
            <img class="card-img" src="./img.png" alt="卡片图片">
            <div class="card-content">
                <h3>卡片标题 2</h3>
                <p>这是另一个卡片的内容描述。这是另一个卡片的内容描述。</p>
            </div>
        </div>
        <div class="card">
            <img class="card-img" src="./img.png" alt="卡片图片">
            <div class="card-content">
                <h3>卡片标题 3</h3>
                <p>这是第三个卡片的内容描述。这是第三个卡片的内容描述。</p>
            </div>
        </div>
    </div>
</body>

</html>

吸顶菜单与滚动监听排版

吸顶菜单在页面滚动到一定位置时固定在顶部，方便用户随时操作。可以结合 JavaScript 实现滚动监听和吸顶效果。

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>吸顶菜单示例</title>
    <style>
        body {
            margin: 0;
        }

        #header {
            background-color: #333;
            color: white;
            padding: 20px;
            text-align: center;
        }

        #menu {
            background-color: #444;
            color: white;
            padding: 10px;
            position: relative;
        }

        #menu.sticky {
            position: fixed;
            top: 0;
            width: 100%;
        }

        #content {
            padding: 20px;
            height: 2000px;
        }
    </style>
</head>

<body>
    <div id="header">网站标题</div>
    <div id="menu">
        <a href="#">首页</a>
        <a href="#">关于我们</a>
        <a href="#">联系我们</a>
    </div>
    <div id="content">
        <p>这里是大量的页面内容，用于测试滚动效果。这里是大量的页面内容，用于测试滚动效果。这里是大量的页面内容，用于测试滚动效果。</p>
    </div>
    <script>
        const menu = document.getElementById('menu');
        const sticky = menu.offsetTop;

        window.onscroll = function () {
            if (window.pageYOffset >= sticky) {
                menu.classList.add('sticky');
            } else {
                menu.classList.remove('sticky');
            }
        };
    </script>
</body>

</html>

响应式导航菜单排版

响应式导航菜单在不同屏幕尺寸下有不同的显示方式，常见的是在小屏幕上以汉堡菜单的形式展示。

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>响应式导航菜单示例</title>
    <style>
        body {
            margin: 0;
        }

        .topnav {
            overflow: hidden;
            background-color: #333;
        }

        .topnav a {
            float: left;
            display: block;
            color: white;
            text-align: center;
            padding: 14px 16px;
            text-decoration: none;
        }

        .topnav .icon {
            display: none;
        }

        @media screen and (max-width: 600px) {
            .topnav a:not(:first-child) {
                display: none;
            }

            .topnav a.icon {
                float: right;
                display: block;
            }

            .topnav.responsive {
                position: relative;
            }

            .topnav.responsive .icon {
                position: absolute;
                right: 0;
                top: 0;
            }

            .topnav.responsive a {
                float: none;
                display: block;
                text-align: left;
            }
        }
    </style>
</head>

<body>
    <div class="topnav" id="myTopnav">
        <a href="#">首页</a>
        <a href="#">关于我们</a>
        <a href="#">联系我们</a>
        <a href="javascript:void(0);" class="icon" onclick="myFunction()">
            <i class="fa fa-bars"></i> ☰
        </a>
    </div>
    <div style="padding:16px">
        <p>这里是页面内容。</p>
    </div>
    <script>
        function myFunction() {
            const x = document.getElementById('myTopnav');
            if (x.className === 'topnav') {
                x.className += ' responsive';
            } else {
                x.className = 'topnav';
            }
        }
    </script>
</body>

</html>

全屏滚动排版

全屏滚动效果可以让页面以整屏为单位进行滚动，给用户带来流畅且富有视觉冲击力的浏览体验，常用于展示产品介绍、宣传页面等。可以借助 JavaScript 库（如 fullPage.js）或自己编写代码来实现。以下是一个简单的纯 JavaScript 实现示例：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>全屏滚动排版示例</title>
    <style>
        html,
        body {
            height: 100%;
            margin: 0;
            overflow: hidden;
        }

        .section {
            height: 100vh;
            display: flex;
            justify-content: center;
            align-items: center;
            font-size: 30px;
        }

        #section1 {
            background-color: #f44336;
        }

        #section2 {
            background-color: #2196f3;
        }

        #section3 {
            background-color: #4caf50;
        }
    </style>
</head>

<body>
    <div id="section1" class="section">
        第一屏内容
    </div>
    <div id="section2" class="section">
        第二屏内容
    </div>
    <div id="section3" class="section">
        第三屏内容
    </div>
    <script>
        const sections = document.querySelectorAll('.section');
        let currentSection = 0;

        window.addEventListener('wheel', function (e) {
            if (e.deltaY > 0 && currentSection < sections.length - 1) {
                currentSection++;
            } else if (e.deltaY < 0 && currentSection > 0) {
                currentSection--;
            }
            window.scrollTo({
                top: sections[currentSection].offsetTop,
                behavior: 'smooth'
            });
        });
    </script>
</body>

</html>

视差滚动排版

视差滚动是一种视觉效果，通过让不同层次的元素以不同的速度滚动，营造出立体感和深度感。通常用于背景、前景元素的滚动效果差异展示。

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>视差滚动排版示例</title>
    <style>
        body {
            margin: 0;
            height: 2000px;
        }

        .parallax {
            position: relative;
            height: 100vh;
            overflow-x: hidden;
            overflow-y: auto;
            perspective: 1px;
        }

        .layer {
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
        }

        .background {
            transform: translateZ(-1px) scale(2);
            background-image: url('./img.png');
            background-size: cover;
            height: 200vh;
        }

        .foreground {
            transform: translateZ(0);
            padding: 50vh 0;
            text-align: center;
            color: white;
            font-size: 30px;
        }
    </style>
</head>

<body>
    <div class="parallax">
        <div class="layer background"></div>
        <div class="layer foreground">
            <p>视差滚动效果展示</p>
        </div>
    </div>
</body>

</html>

流式布局与弹性布局结合

将流式布局的自适应特性与弹性布局的灵活性相结合，可以创建出适应不同屏幕尺寸且元素排列合理的页面。

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>流式与弹性布局结合示例</title>
    <style>
        .container {
            display: flex;
            flex-wrap: wrap;
            justify-content: center;
        }

        .box {
            flex: 1 1 300px;
            margin: 10px;
            padding: 20px;
            background-color: #f0f0f0;
        }
    </style>
</head>

<body>
    <div class="container">
        <div class="box">
            <p>盒子 1 的内容。</p>
        </div>
        <div class="box">
            <p>盒子 2 的内容，可能会比盒子 1 长一些。盒子 2 的内容，可能会比盒子 1 长一些。</p>
        </div>
        <div class="box">
            <p>盒子 3 的内容。</p>
        </div>
        <div class="box">
            <p>盒子 4 的内容。</p>
        </div>
    </div>
</body>

</html>

动态排版更新

利用 JavaScript 动态更新 HTML 内容和样式，实现排版的动态变化。例如，根据用户的交互（点击、输入等）改变页面布局或元素显示。

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>动态排版更新示例</title>
    <style>
        #content {
            padding: 20px;
            background-color: #e0e0e0;
        }
    </style>
</head>

<body>
    <button onclick="updateLayout()">点击更新排版</button>
    <div id="content">
        <p>初始内容。</p>
    </div>
    <script>
        function updateLayout() {
            const contentDiv = document.getElementById('content');
            const newParagraph = document.createElement('p');
            newParagraph.textContent = '这是动态添加的内容。';
            contentDiv.appendChild(newParagraph);
            contentDiv.style.backgroundColor = '#add8e6';
        }
    </script>
</body>

</html>

嵌套表格排版

在某些复杂的数据展示场景中，可能需要使用嵌套表格来更清晰地组织数据。

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>嵌套表格排版示例</title>
    <style>
        table {
            border-collapse: collapse;
            width: 100%;
        }

        th,
        td {
            border: 1px solid #ccc;
            padding: 8px;
            text-align: left;
        }
    </style>
</head>

<body>
    <table>
        <tr>
            <th>主分类</th>
            <th>子分类详情</th>
        </tr>
        <tr>
            <td>分类 A</td>
            <td>
                <table>
                    <tr>
                        <th>子分类</th>
                        <th>描述</th>
                    </tr>
                    <tr>
                        <td>子分类 A1</td>
                        <td>这是子分类 A1 的描述。</td>
                    </tr>
                    <tr>
                        <td>子分类 A2</td>
                        <td>这是子分类 A2 的描述。</td>
                    </tr>
                </table>
            </td>
        </tr>
        <tr>
            <td>分类 B</td>
            <td>
                <table>
                    <tr>
                        <th>子分类</th>
                        <th>描述</th>
                    </tr>
                    <tr>
                        <td>子分类 B1</td>
                        <td>这是子分类 B1 的描述。</td>
                    </tr>
                </table>
            </td>
        </tr>
    </table>
</body>

</html>

动画序列排版

通过 CSS 动画和 JavaScript 可以创建复杂的动画序列，让页面元素按照特定的顺序依次执行动画，增强页面的趣味性和视觉吸引力。

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>动画序列排版示例</title>
    <style>
        .box {
            width: 50px;
            height: 50px;
            background-color: #3498db;
            margin: 10px;
            opacity: 0;
        }

        @keyframes fadeIn {
            from {
                opacity: 0;
                transform: translateY(20px);
            }
            to {
                opacity: 1;
                transform: translateY(0);
            }
        }
    </style>
</head>

<body>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <script>
        const boxes = document.querySelectorAll('.box');
        let delay = 0;
        boxes.forEach((box) => {
            box.style.animation = `fadeIn 0.5s ease-out ${delay}s forwards`;
            delay += 0.2;
        });
    </script>
</body>

</html>

响应式视频排版

在网页中嵌入视频时，需要确保视频在不同设备上都能良好显示。可以使用 HTML5 的 <video> 标签结合 CSS 实现响应式视频排版。

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>响应式视频排版示例</title>
    <style>
        .video-container {
            position: relative;
            width: 100%;
            height: 0;
            padding-bottom: 56.25%;
        }

        .video-container video {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
        }
    </style>
</head>

<body>
    <div class="video-container">
        <video controls>
            <source src="./mp4.mp4" type="video/mp4">
            您的浏览器不支持播放此视频。
        </video>
    </div>
</body>

</html>

堆叠卡片排版

堆叠卡片效果可以让卡片看起来像是堆叠在一起，通过调整卡片的位置和透明度等属性来实现层次感。

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>堆叠卡片排版示例</title>
    <style>
        .stacked-cards {
            position: relative;
            height: 300px;
            width: 200px;
            margin: 50px auto;
        }

        .card {
            position: absolute;
            width: 100%;
            height: 100%;
            background-color: #f1c40f;
            border-radius: 10px;
            box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
            transition: all 0.3s ease;
        }

        .card:nth-child(1) {
            transform: rotate(-10deg);
            z-index: 1;
            opacity: 0.8;
        }

        .card:nth-child(2) {
            transform: rotate(5deg);
            z-index: 2;
            opacity: 0.9;
        }

        .card:nth-child(3) {
            transform: rotate(15deg);
            z-index: 3;
        }
    </style>
</head>

<body>
    <div class="stacked-cards">
        <div class="card"></div>
        <div class="card"></div>
        <div class="card"></div>
    </div>
</body>

</html>

弹性侧边栏排版

创建一个可以根据屏幕大小和用户操作进行伸缩的侧边栏，常用于导航或辅助信息展示。

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>弹性侧边栏排版示例</title>
    <style>
        body {
            margin: 0;
            display: flex;
        }

        #sidebar {
            width: 200px;
            background-color: #333;
            color: white;
            transition: width 0.3s ease;
        }

        #content {
            flex: 1;
            padding: 20px;
        }

        #toggle-btn {
            position: absolute;
            top: 10px;
            left: 10px;
            cursor: pointer;
        }

        .sidebar-collapsed {
            width: 0 !important;
        }
    </style>
</head>

<body>
    <button id="toggle-btn">☰</button>
    <div id="sidebar">
        <ul>
            <li>菜单项目 1</li>
            <li>菜单项目 2</li>
            <li>菜单项目 3</li>
        </ul>
    </div>
    <div id="content">
        <p>这里是页面的主要内容。</p>
    </div>
    <script>
        const toggleBtn = document.getElementById('toggle-btn');
        const sidebar = document.getElementById('sidebar');
        toggleBtn.addEventListener('click', () => {
            sidebar.classList.toggle('sidebar-collapsed');
        });
    </script>
</body>

</html>

图片画廊排版

图片画廊用于展示多张图片，可通过 CSS 实现不同的布局方式，如网格布局、滑动布局等。以下是一个简单的网格图片画廊示例。

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>图片画廊排版示例</title>
    <style>
        .gallery {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
            gap: 10px;
            padding: 10px;
        }

        .gallery img {
            width: 100%;
            height: auto;
            object-fit: cover;
            border-radius: 5px;
        }
    </style>
</head>

<body>
    <div class="gallery">
        <img src="./img.png" alt="图片 1">
        <img src="./img.png" alt="图片 2">
        <img src="./img.png" alt="图片 3">
        <img src="./img.png" alt="图片 4">
        <img src="./img.png" alt="图片 5">
        <img src="./img.png" alt="图片 6">
    </div>
</body>

</html>