《HTML 简易速速上手小册》第5章：HTML 高级布局技巧（2024 最新版）

本文介绍: 当然，在实际的项目中，响应式设计通常更复杂，需要更多的CSS技巧，如媒体查询。它们就像是HTML布局的瑞士军刀，虽然看起来普通，但功能强大，能够帮助你实现各种布局效果。让我们来创建一个简单的导航栏，虽然没有CSS的华丽外衣，但我们可以用HTML的魔法使它变得有趣。可以帮助你组织页面内容，使结构更清晰，就像在书架上摆放书籍一样，每本书都有它的位置。我们将构建一个简单的两栏布局，包括一个侧边栏和一个主内容区。最后，我们将创建一个布局更加复杂的页面，它包含嵌套的。来包裹整个内容，就像给你的内容建一个家。

在这里插入图片描述

假设我们要创建一个包含标题、段落和一个按钮的简单页面布局。

源码如下：

这个示例展示了一个基本的页面布局，包含标题、强调文本的段落和一个按钮。

<!DOCTYPE html>
<html>
<head>
    <title>简单页面布局</title>
</head>
<body>
    <div>
        <h1>欢迎来到我的网页！</h1>
        <p>这里有很多 <span style="font-weight:bold;">有趣的内容</span> 等着你。</p>
        <button>探索更多</button>
    </div>
</body>
</html>

假设我们有一段引用文字，我们想让它看起来与众不同。

此示例包含一个特别样式的引用文本，使用 <div> 和 <span> 来实现特别的布局和强调效果。

<!DOCTYPE html>
<html>
<head>
    <title>特别样式文本</title>
</head>
<body>
    <div style="border-left: 3px solid grey; padding-left: 10px;">
        <p>“生活就像一盒巧克力，<span style="font-style:italic;">你永远不知道下一颗是什么味道。</span>”</p>
    </div>
</body>
</html>

这个示例演示了一个简单的导航栏，使用 <div> 和 <span> 来组织链接。

<!DOCTYPE html>
<html>
<head>
    <title>简单导航栏</title>
</head>
<body>
    <div>
        <span><a href="#home">首页</a></span> |
        <span><a href="#news">新闻</a></span> |
        <span><a href="#contact">联系我们</a></span> |
        <span><a href="#about">关于</a></span>
    </div>
</body>
</html>

通过这些案例，我们可以看到 <div> 和 <span> 在构建网页布局中的多功能性和灵活性。它们就像是HTML布局的瑞士军刀，虽然看起来普通，但功能强大，能够帮助你实现各种布局效果。不要小看这些基本元素，它们可以帮助你构建出既简单又有效的网页布局！

<!DOCTYPE html>
<html>
<head>
    <title>两栏布局</title>
</head>
<body>
    <div>
        <div style="float: left; width: 20%;">
            <p>侧边栏内容...</p>
        </div>
        <div style="float: left; width: 80%;">
            <p>主要内容区...</p>
        </div>
    </div>
</body>
</html>

<!DOCTYPE html>
<html>
<head>
    <title>复杂页面布局</title>
</head>
<body>
    <header>
        <h1>页面标题</h1>
    </header>
    <div>
        <section>
            <h2>内容区 1</h2>
            <p>这里是内容区 1 的描述...</p>
        </section>
        <section>
            <h2>内容区 2</h2>
            <p>这里是内容区 2 的描述...</p>
        </section>
    </div>
    <footer>
        <p>页脚信息...</p>
    </footer>
</body>
</html>

最后，我们将创建一个布局更加复杂的页面，它包含嵌套的 <div> 来组织内容。

<!DOCTYPE html>
<html>
<head>
    <title>嵌套布局</title>
</head>
<body>
    <div>
        <header>
            <h1>网站标题</h1>
        </header>
        <nav>
            <ul>
                <li>导航 1</li>
                <li>导航 2</li>
                <li>导航 3</li>
            </ul>
        </nav>
        <article>
            <section>
                <h2>文章标题</h2>
                <p>文章内容...</p>
            </section>
            <aside>
                <h3>相关信息</h3>
                <p>一些相关信息...</p>
            </aside>
        </article>
        <footer>
            <p>版权信息...</p>
        </footer>
    </div>
</body>
</html>

通过这些案例，我们探索了如何使用 HTML 元素构建从简单到复杂的页面结构。这些布局展示了 <div>, <section>, <header>, <footer> 等元素在页面组织中的强大能力。通过这样的实践，你将更好地理解如何利用 HTML 构建丰富且有条理的网页结构。记住，构建网页就像是艺术创作，每个元素都是你画布上的一笔！

<!DOCTYPE html>
<html>
<head>
    <title>流式布局示例</title>
    <style>
        .container {
            width: 100%;
        }
        .left, .right {
            width: 50%;
            float: left;
        }
    </style>
</head>
<body>
    <div class="container">
        <div class="left">左侧内容</div>
        <div class="right">右侧内容</div>
    </div>
</body>
</html>

<!DOCTYPE html>
<html>
<head>
    <title>自适应三列布局</title>
    <style>
        .container {
            width: 100%;
        }
        .column {
            width: 33.33%;
            float: left;
        }
    </style>
</head>
<body>
    <div class="container">
        <div class="column">第一列内容</div>
        <div class="column">第二列内容</div>
        <div class="column">第三列内容</div>
    </div>
</body>
</html>

<!DOCTYPE html>
<html>
<head>
    <title>响应式图像画廊</title>
    <style>
        .gallery {
            width: 100%;
        }
        .gallery img {
            width: 100%;
            height: auto;
        }
    </style>
</head>
<body>
    <div class="gallery">
        <img src="image1.jpg" alt="Image 1">
        <img src="image2.jpg" alt="Image 2">
        <img src="image3.jpg" alt="Image 3">
    </div>
</body>
</html>