Html教程

Appearance

HTML 布局 ​

什么是网页布局 ​

网页布局是指网页中各个元素的排列和定位方式。好的布局能够使内容清晰易读，提供良好的用户体验。HTML配合CSS可以实现各种复杂的布局效果。

布局的发展历史 ​

1. 表格布局（已淘汰） ​

html
<!-- 不推荐：表格布局 -->
<table width="100%">
    <tr>
        <td colspan="3">头部</td>
    </tr>
    <tr>
        <td width="200">侧边栏</td>
        <td>主要内容</td>
        <td width="150">右侧栏</td>
    </tr>
    <tr>
        <td colspan="3">底部</td>
    </tr>
</table>

2. 浮动布局 ​

html
<style>
.float-layout {
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
}

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

.container {
    overflow: hidden; /* 清除浮动 */
}

.sidebar {
    float: left;
    width: 250px;
    background-color: #f4f4f4;
    padding: 20px;
    min-height: 400px;
}

.main-content {
    float: left;
    width: calc(100% - 350px);
    padding: 20px;
    background-color: white;
    min-height: 400px;
}

.right-sidebar {
    float: right;
    width: 200px;
    background-color: #e9ecef;
    padding: 20px;
    min-height: 400px;
}
</style>

<div class="float-layout">
    <div class="header">
        <h1>网站标题</h1>
    </div>
    
    <div class="container">
        <div class="sidebar">
            <h3>左侧导航</h3>
            <ul>
                <li>菜单1</li>
                <li>菜单2</li>
                <li>菜单3</li>
            </ul>
        </div>
        
        <div class="right-sidebar">
            <h3>广告位</h3>
            <p>广告内容</p>
        </div>
        
        <div class="main-content">
            <h2>主要内容</h2>
            <p>这里是页面的主要内容区域。</p>
        </div>
    </div>
    
    <div class="footer">
        <p>&copy; 2024 版权信息</p>
    </div>
</div>

3. 定位布局 ​

html
<style>
.positioned-layout {
    position: relative;
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
    min-height: 100vh;
}

.pos-header {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 80px;
    background-color: #333;
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
}

.pos-sidebar {
    position: absolute;
    top: 80px;
    left: 0;
    width: 200px;
    bottom: 60px;
    background-color: #f4f4f4;
    padding: 20px;
}

.pos-main {
    position: absolute;
    top: 80px;
    left: 240px;
    right: 0;
    bottom: 60px;
    background-color: white;
    padding: 20px;
    overflow-y: auto;
}

.pos-footer {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 60px;
    background-color: #666;
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
}
</style>

<div class="positioned-layout">
    <header class="pos-header">
        <h1>固定头部</h1>
    </header>
    
    <aside class="pos-sidebar">
        <h3>侧边栏</h3>
        <nav>
            <ul>
                <li><a href="#">链接1</a></li>
                <li><a href="#">链接2</a></li>
                <li><a href="#">链接3</a></li>
            </ul>
        </nav>
    </aside>
    
    <main class="pos-main">
        <h2>主要内容</h2>
        <p>这里是可滚动的主要内容区域。当内容超过容器高度时，会出现滚动条。</p>
        <p>更多内容...</p>
    </main>
    
    <footer class="pos-footer">
        <p>固定底部</p>
    </footer>
</div>

现代布局技术 ​

Flexbox 弹性布局 ​

html
<style>
.flex-layout {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    max-width: 1200px;
    margin: 0 auto;
}

.flex-header {
    background-color: #007acc;
    color: white;
    padding: 20px;
    text-align: center;
}

.flex-nav {
    background-color: #333;
    padding: 0;
}

.flex-nav ul {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
}

.flex-nav a {
    display: block;
    color: white;
    padding: 15px 20px;
    text-decoration: none;
    transition: background-color 0.3s;
}

.flex-nav a:hover {
    background-color: #555;
}

.flex-body {
    display: flex;
    flex: 1; /* 占据剩余空间 */
}

.flex-sidebar {
    flex: 0 0 250px; /* 固定宽度 */
    background-color: #f8f9fa;
    padding: 20px;
}

.flex-main {
    flex: 1; /* 占据剩余空间 */
    padding: 30px;
    background-color: white;
}

.flex-aside {
    flex: 0 0 200px; /* 固定宽度 */
    background-color: #e9ecef;
    padding: 20px;
}

.flex-footer {
    background-color: #6c757d;
    color: white;
    padding: 20px;
    text-align: center;
}

/* 响应式 */
@media (max-width: 768px) {
    .flex-body {
        flex-direction: column;
    }
    
    .flex-sidebar,
    .flex-aside {
        flex: none;
    }
    
    .flex-nav ul {
        flex-direction: column;
    }
}
</style>

<div class="flex-layout">
    <header class="flex-header">
        <h1>Flexbox 布局示例</h1>
    </header>
    
    <nav class="flex-nav">
        <ul>
            <li><a href="#">首页</a></li>
            <li><a href="#">产品</a></li>
            <li><a href="#">服务</a></li>
            <li><a href="#">关于</a></li>
            <li><a href="#">联系</a></li>
        </ul>
    </nav>
    
    <div class="flex-body">
        <aside class="flex-sidebar">
            <h3>侧边导航</h3>
            <ul>
                <li><a href="#">分类1</a></li>
                <li><a href="#">分类2</a></li>
                <li><a href="#">分类3</a></li>
            </ul>
        </aside>
        
        <main class="flex-main">
            <h2>主要内容区域</h2>
            <p>这里是使用Flexbox布局的主要内容区域。Flexbox提供了强大而灵活的布局能力。</p>
            <p>主要优势：</p>
            <ul>
                <li>简单的垂直居中</li>
                <li>灵活的空间分配</li>
                <li>响应式友好</li>
                <li>项目排序控制</li>
            </ul>
        </main>
        
        <aside class="flex-aside">
            <h3>相关信息</h3>
            <p>这里可以放置相关链接、广告或其他辅助信息。</p>
        </aside>
    </div>
    
    <footer class="flex-footer">
        <p>&copy; 2024 Flexbox 布局示例</p>
    </footer>
</div>

CSS Grid 网格布局 ​

html
<style>
.grid-layout {
    display: grid;
    grid-template-areas:
        "header header header header"
        "nav nav nav nav"
        "sidebar main main aside"
        "footer footer footer footer";
    grid-template-rows: auto auto 1fr auto;
    grid-template-columns: 250px 1fr 1fr 200px;
    gap: 20px;
    min-height: 100vh;
    max-width: 1200px;
    margin: 0 auto;
    padding: 20px;
}

.grid-header {
    grid-area: header;
    background: linear-gradient(135deg, #667eea, #764ba2);
    color: white;
    padding: 30px;
    text-align: center;
    border-radius: 10px;
}

.grid-nav {
    grid-area: nav;
    background-color: #333;
    border-radius: 8px;
    overflow: hidden;
}

.grid-nav ul {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(5, 1fr);
}

.grid-nav a {
    display: block;
    color: white;
    padding: 15px;
    text-decoration: none;
    text-align: center;
    transition: background-color 0.3s;
}

.grid-nav a:hover {
    background-color: #555;
}

.grid-sidebar {
    grid-area: sidebar;
    background-color: #f8f9fa;
    padding: 20px;
    border-radius: 10px;
}

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

.grid-aside {
    grid-area: aside;
    background-color: #e3f2fd;
    padding: 20px;
    border-radius: 10px;
}

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

/* 响应式网格 */
@media (max-width: 1024px) {
    .grid-layout {
        grid-template-areas:
            "header header"
            "nav nav"
            "main aside"
            "sidebar sidebar"
            "footer footer";
        grid-template-columns: 1fr 300px;
    }
}

@media (max-width: 768px) {
    .grid-layout {
        grid-template-areas:
            "header"
            "nav"
            "main"
            "sidebar"
            "aside"
            "footer";
        grid-template-columns: 1fr;
        padding: 10px;
        gap: 15px;
    }
    
    .grid-nav ul {
        grid-template-columns: 1fr;
    }
}
</style>

<div class="grid-layout">
    <header class="grid-header">
        <h1>CSS Grid 布局示例</h1>
        <p>强大的二维布局系统</p>
    </header>
    
    <nav class="grid-nav">
        <ul>
            <li><a href="#">首页</a></li>
            <li><a href="#">产品</a></li>
            <li><a href="#">服务</a></li>
            <li><a href="#">关于</a></li>
            <li><a href="#">联系</a></li>
        </ul>
    </nav>
    
    <aside class="grid-sidebar">
        <h3>侧边栏</h3>
        <ul>
            <li><a href="#">导航项1</a></li>
            <li><a href="#">导航项2</a></li>
            <li><a href="#">导航项3</a></li>
            <li><a href="#">导航项4</a></li>
        </ul>
    </aside>
    
    <main class="grid-main">
        <h2>CSS Grid 的优势</h2>
        <p>CSS Grid 是一个二维布局系统，非常适合创建复杂的网页布局：</p>
        
        <div style="display: grid; grid-template-columns: repeat(2, 1fr); gap: 20px; margin: 20px 0;">
            <div style="background: #f0f8ff; padding: 15px; border-radius: 5px;">
                <h4>灵活的网格</h4>
                <p>可以轻松创建不规则的网格布局</p>
            </div>
            <div style="background: #f0fff0; padding: 15px; border-radius: 5px;">
                <h4>响应式设计</h4>
                <p>通过媒体查询轻松适配不同屏幕</p>
            </div>
            <div style="background: #fff8f0; padding: 15px; border-radius: 5px;">
                <h4>区域命名</h4>
                <p>使用grid-template-areas清晰定义布局</p>
            </div>
            <div style="background: #f8f0ff; padding: 15px; border-radius: 5px;">
                <h4>精确控制</h4>
                <p>对项目位置和大小有精确控制</p>
            </div>
        </div>
    </main>
    
    <aside class="grid-aside">
        <h3>快速链接</h3>
        <ul style="list-style: none; padding: 0;">
            <li style="margin-bottom: 8px;"><a href="#" style="color: #1976d2; text-decoration: none;">Grid 指南</a></li>
            <li style="margin-bottom: 8px;"><a href="#" style="color: #1976d2; text-decoration: none;">Flexbox 对比</a></li>
            <li style="margin-bottom: 8px;"><a href="#" style="color: #1976d2; text-decoration: none;">浏览器支持</a></li>
            <li style="margin-bottom: 8px;"><a href="#" style="color: #1976d2; text-decoration: none;">实例代码</a></li>
        </ul>
    </aside>
    
    <footer class="grid-footer">
        <p>&copy; 2024 CSS Grid 布局示例 | 现代网页布局技术</p>
    </footer>
</div>

常见布局模式 ​

1. 圣杯布局 ​

html
<style>
.holy-grail {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}

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

.hg-container {
    display: flex;
    flex: 1;
}

.hg-main {
    flex: 1;
    padding: 20px;
    background-color: #fff;
    order: 2; /* 主内容在中间 */
}

.hg-nav {
    flex: 0 0 200px;
    background-color: #f4f4f4;
    padding: 20px;
    order: 1; /* 导航在左侧 */
}

.hg-aside {
    flex: 0 0 180px;
    background-color: #e9ecef;
    padding: 20px;
    order: 3; /* 侧边栏在右侧 */
}

@media (max-width: 768px) {
    .hg-container {
        flex-direction: column;
    }
    
    .hg-main,
    .hg-nav,
    .hg-aside {
        order: initial;
    }
}
</style>

<div class="holy-grail">
    <header class="hg-header">
        <h1>圣杯布局</h1>
    </header>
    
    <div class="hg-container">
        <nav class="hg-nav">
            <h3>导航</h3>
            <ul>
                <li>菜单1</li>
                <li>菜单2</li>
                <li>菜单3</li>
            </ul>
        </nav>
        
        <main class="hg-main">
            <h2>主要内容</h2>
            <p>这是圣杯布局的主要内容区域。无论侧边栏内容多少，主内容始终居中。</p>
        </main>
        
        <aside class="hg-aside">
            <h3>侧边栏</h3>
            <p>辅助信息</p>
        </aside>
    </div>
    
    <footer class="hg-footer">
        <p>底部信息</p>
    </footer>
</div>

2. 双飞翼布局 ​

html
<style>
.double-wing {
    min-width: 600px; /* 防止压缩过度 */
}

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

.dw-container {
    overflow: hidden;
    padding: 0 200px 0 220px; /* 为侧栏留出空间 */
}

.dw-main {
    width: 100%;
    float: left;
    background-color: #fff;
    min-height: 400px;
    padding: 20px;
    box-sizing: border-box;
}

.dw-left {
    width: 200px;
    float: left;
    margin-left: -100%;
    position: relative;
    left: -220px;
    background-color: #f4f4f4;
    min-height: 400px;
    padding: 20px;
    box-sizing: border-box;
}

.dw-right {
    width: 180px;
    float: left;
    margin-left: -180px;
    position: relative;
    right: -200px;
    background-color: #e9ecef;
    min-height: 400px;
    padding: 20px;
    box-sizing: border-box;
}

.clear {
    clear: both;
}
</style>

<div class="double-wing">
    <header class="dw-header">
        <h1>双飞翼布局</h1>
    </header>
    
    <div class="dw-container">
        <div class="dw-main">
            <h2>主要内容</h2>
            <p>双飞翼布局是圣杯布局的改进版本，通过内边距而不是定位来为侧栏留出空间。</p>
        </div>
        
        <div class="dw-left">
            <h3>左侧栏</h3>
            <p>左侧导航或菜单</p>
        </div>
        
        <div class="dw-right">
            <h3>右侧栏</h3>
            <p>右侧辅助信息</p>
        </div>
    </div>
    
    <div class="clear"></div>
    
    <footer class="dw-footer">
        <p>双飞翼布局示例</p>
    </footer>
</div>

3. 瀑布流布局 ​

html
<style>
.masonry {
    column-count: 3;
    column-gap: 20px;
    padding: 20px;
    background-color: #f5f5f5;
}

.masonry-item {
    break-inside: avoid;
    margin-bottom: 20px;
    background-color: white;
    border-radius: 8px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    padding: 15px;
    transition: transform 0.3s ease;
}

.masonry-item:hover {
    transform: translateY(-5px);
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
}

.masonry-item h3 {
    margin: 0 0 10px 0;
    color: #333;
}

.masonry-item p {
    margin: 0;
    line-height: 1.6;
    color: #666;
}

.masonry-item.tall {
    min-height: 200px;
}

.masonry-item.short {
    min-height: 80px;
}

@media (max-width: 768px) {
    .masonry {
        column-count: 2;
    }
}

@media (max-width: 480px) {
    .masonry {
        column-count: 1;
    }
}
</style>

<div class="masonry">
    <div class="masonry-item">
        <h3>项目一</h3>
        <p>这是一个短小的内容项目，展示瀑布流布局的效果。</p>
    </div>
    
    <div class="masonry-item tall">
        <h3>项目二</h3>
        <p>这是一个较长的内容项目。瀑布流布局可以很好地处理不同高度的内容块，让页面看起来更加自然和美观。</p>
        <p>它特别适合展示图片画廊、博客文章列表、产品展示等场景。</p>
    </div>
    
    <div class="masonry-item">
        <h3>项目三</h3>
        <p>中等长度的内容示例。</p>
    </div>
    
    <div class="masonry-item short">
        <h3>项目四</h3>
        <p>简短内容。</p>
    </div>
    
    <div class="masonry-item tall">
        <h3>项目五</h3>
        <p>另一个较长的内容项目。CSS的column布局让实现瀑布流变得非常简单。</p>
        <p>不需要JavaScript计算，浏览器会自动分配内容到各列中。</p>
        <p>这种布局方式既美观又实用。</p>
    </div>
    
    <div class="masonry-item">
        <h3>项目六</h3>
        <p>普通长度的内容块，展示布局的灵活性。</p>
    </div>
</div>

响应式布局 ​

移动优先的响应式设计 ​

html
<style>
/* 移动优先的基础样式 */
.responsive-layout {
    padding: 10px;
}

.resp-header {
    background: linear-gradient(135deg, #667eea, #764ba2);
    color: white;
    padding: 15px;
    text-align: center;
    border-radius: 8px;
    margin-bottom: 15px;
}

.resp-nav {
    background-color: #333;
    border-radius: 6px;
    margin-bottom: 15px;
}

.resp-nav ul {
    list-style: none;
    margin: 0;
    padding: 0;
}

.resp-nav a {
    display: block;
    color: white;
    padding: 12px 15px;
    text-decoration: none;
    border-bottom: 1px solid #444;
}

.resp-nav a:hover {
    background-color: #555;
}

.resp-nav li:last-child a {
    border-bottom: none;
}

.resp-content {
    display: flex;
    flex-direction: column;
    gap: 15px;
}

.resp-main {
    background-color: white;
    padding: 20px;
    border-radius: 8px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.resp-sidebar {
    background-color: #f8f9fa;
    padding: 15px;
    border-radius: 8px;
}

.resp-footer {
    background-color: #6c757d;
    color: white;
    padding: 15px;
    text-align: center;
    border-radius: 6px;
    margin-top: 15px;
}

/* 平板尺寸 */
@media (min-width: 768px) {
    .responsive-layout {
        padding: 20px;
        max-width: 1200px;
        margin: 0 auto;
    }
    
    .resp-header {
        padding: 25px;
        margin-bottom: 20px;
    }
    
    .resp-nav ul {
        display: flex;
    }
    
    .resp-nav a {
        border-bottom: none;
        border-right: 1px solid #444;
    }
    
    .resp-nav li:last-child a {
        border-right: none;
    }
    
    .resp-content {
        flex-direction: row;
        gap: 20px;
    }
    
    .resp-main {
        flex: 2;
        padding: 30px;
    }
    
    .resp-sidebar {
        flex: 1;
        padding: 20px;
    }
    
    .resp-footer {
        margin-top: 20px;
        padding: 20px;
    }
}

/* 桌面尺寸 */
@media (min-width: 1024px) {
    .resp-header {
        padding: 40px;
    }
    
    .resp-content {
        gap: 30px;
    }
    
    .resp-main {
        flex: 3;
    }
}

/* 大屏幕 */
@media (min-width: 1200px) {
    .responsive-layout {
        max-width: 1400px;
    }
}
</style>

<div class="responsive-layout">
    <header class="resp-header">
        <h1>响应式布局示例</h1>
        <p>适配所有设备尺寸</p>
    </header>
    
    <nav class="resp-nav">
        <ul>
            <li><a href="#">首页</a></li>
            <li><a href="#">产品</a></li>
            <li><a href="#">服务</a></li>
            <li><a href="#">关于</a></li>
            <li><a href="#">联系</a></li>
        </ul>
    </nav>
    
    <div class="resp-content">
        <main class="resp-main">
            <h2>响应式设计原则</h2>
            <p>响应式网页设计是一种让网页在不同设备上都能良好显示的技术方法：</p>
            
            <h3>1. 流体网格</h3>
            <p>使用相对单位（如百分比）而不是固定像素来定义布局。</p>
            
            <h3>2. 弹性图像</h3>
            <p>图像能够根据容器大小自动调整，防止溢出。</p>
            
            <h3>3. 媒体查询</h3>
            <p>根据设备特性应用不同的CSS样式。</p>
            
            <h3>4. 移动优先</h3>
            <p>先设计移动端，然后逐步增强到桌面端。</p>
        </main>
        
        <aside class="resp-sidebar">
            <h3>设备断点</h3>
            <ul>
                <li><strong>手机:</strong> < 768px</li>
                <li><strong>平板:</strong> 768px - 1023px</li>
                <li><strong>桌面:</strong> 1024px - 1199px</li>
                <li><strong>大屏:</strong> ≥ 1200px</li>
            </ul>
            
            <h3>测试方法</h3>
            <p>调整浏览器窗口大小，观察布局变化。使用开发者工具模拟不同设备。</p>
        </aside>
    </div>
    
    <footer class="resp-footer">
        <p>&copy; 2024 响应式布局示例 | 适配所有设备</p>
    </footer>
</div>

布局调试技巧 ​

CSS 网格可视化 ​

html
<style>
.debug-grid {
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    gap: 10px;
    padding: 20px;
    background-color: #f0f0f0;
}

.debug-grid > * {
    background-color: rgba(0, 122, 204, 0.2);
    border: 2px solid #007acc;
    padding: 10px;
    text-align: center;
    min-height: 60px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.col-1 { grid-column: span 1; }
.col-2 { grid-column: span 2; }
.col-3 { grid-column: span 3; }
.col-4 { grid-column: span 4; }
.col-6 { grid-column: span 6; }
.col-12 { grid-column: span 12; }

/* 调试边框 */
.debug * {
    outline: 1px solid red !important;
}

.debug *:hover {
    outline: 2px solid blue !important;
}
</style>

<div class="debug-grid">
    <div class="col-12">12列宽度</div>
    <div class="col-6">6列宽度</div>
    <div class="col-6">6列宽度</div>
    <div class="col-4">4列宽度</div>
    <div class="col-4">4列宽度</div>
    <div class="col-4">4列宽度</div>
    <div class="col-3">3列</div>
    <div class="col-3">3列</div>
    <div class="col-3">3列</div>
    <div class="col-3">3列</div>
</div>

<p><strong>调试提示：</strong>在CSS中添加 <code>outline</code> 属性可以帮助可视化元素边界。</p>

小结 ​

  • 现代布局推荐使用Flexbox和CSS Grid
  • Flexbox适合一维布局，Grid适合二维布局
  • 响应式设计采用移动优先策略
  • 合理使用媒体查询适配不同设备
  • 语义化HTML配合CSS实现布局分离
  • 掌握常见布局模式和调试技巧
  • 避免使用表格和过度依赖定位做布局

Copyright © 2025-2026 京公网安备 11010102000001号 京ICP备2024078128号-1