html框架布局网页代码

作者：还依然存在发布日期:2025-04-04 浏览:119

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>HTML框架布局</title>
    <style>
        body {
            margin: 0;
            padding: 0;
            display: flex;
            flex-direction: column;
            height: 100vh;
        }
        header, footer {
            background-color: #f8f9fa;
            text-align: center;
            padding: 10px;
        }
        main {
            display: flex;
            flex: 1;
        }
        nav {
            background-color: #e9ecef;
            width: 200px;
            padding: 10px;
        }
        section {
            flex: 1;
            padding: 10px;
            background-color: #dee2e6;
        }
    </style>
</head>
<body>
    <header>
        <h1>网站标题</h1>
    </header>
    <main>
        <nav>
            <ul>
                <li><a href="#">链接1</a></li>
                <li><a href="#">链接2</a></li>
                <li><a href="#">链接3</a></li>
            </ul>
        </nav>
        <section>
            <h2>主要内容</h2>
            <p>这里是网页的主要内容。</p>
        </section>
    </main>
    <footer>
        <p>版权所有 © 2023</p>
    </footer>
</body>
</html>

解释说明：

HTML结构:
- header: 网页的头部，通常包含网站的标题或导航栏。
- main: 主要内容区域，使用flex布局将页面分为侧边栏和主要内容区。
- nav: 导航栏，放置在左侧，宽度固定为200px。
- section: 主要内容区，占据剩余空间。
- footer: 网页的底部，通常包含版权信息或其他次要内容。
CSS样式:
- 使用了flex布局来实现响应式设计，确保页面在不同设备上都能良好显示。
- 设置了背景颜色、内边距等样式，使页面看起来更加美观。
响应式设计:
- 通过<meta name="viewport" content="width=device-width, initial-scale=1.0">确保网页在移动设备上有良好的缩放效果。

上一篇：html横线代码

下一篇：html合并单元格