HTML布局

news2025/3/31 18:46:54

HTML布局元素

<header>定义文档或者节的页眉
<nav>定义导航链接的容器
<section>定义文档中的一部分
<article>定义单独的文章
<aside>定义内容边栏（如侧边栏）
footer定义文档或节的页脚
<details>定义额外的细节
<summary>为<details>元素定义标题

HTML布局技术

html有四种不同的方法来创建多列布局。每种方式都各有优缺点：
HTML表格
CSS float 属性
CSS 框架
CSS flexbox
HTML表格<table>元素没有被设计成布局工具。<table>元素的设计目的是显示表格数据。因此，不要为页面布局使用表格，这会带来代码混乱。

CSS框架
CSS float属性

在 CSS 框架中，float 属性曾广泛用于实现布局（如网格系统），但随着现代布局技术（Flexbox 和 Grid）的普及，它的使用场景有所减少。浮动元素绑定到文档流，这可能会损害灵活性。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        div.container{
            width: 100%;
            border: 1px solid gray;
        }
        header,footer{
            padding: 1em;
            color: white;
            background-color: black;
            clear: left;
            text-align: center;
        }
        nav{
            float: left;
            max-width: 160px;
            margin: 0;
            padding: 1em;
        }
        nav ul{
            list-style-type: none;
            padding: 0;
        }
        nav ul a{
            text-decoration: none;
        }
        article{
            margin-left: 170px;
            border-left: 1px solid gray;
            padding: 1em;
            overflow: hidden;
        }
    </style>
</head>
<body>
    <div class="container">
        <header>
            <h1>城市</h1>
        </header>

        <nav>
            <ul>
                <li><a href="#">北京</a></li>
                <li><a href="#">巴黎</a></li>
                <li><a href="#">东京</a></li>
            </ul>
        </nav>

        <article>
            <h1>北京</h1>
            <p>
                中国的政治、文化、国际交往和科技创新中心。GDP总量全国领先，兼具历史底蕴与现代活力。
            </p>
            <p>
                跨国公司总部聚集地，世界500强企业中国总部多设于此。
            </p>
        </article>
        <footer>san.com</footer>
    </div>
    
</body>
</html>

CSS Flexbox
使用flexbox确保元件的行为可以预见当页面布局必须适应不同的屏幕尺寸和不同的显示设备。缺点：不能在IE10和早期的浏览器工作。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .flex-container{
            display: -webkit-flex;
            display: flex;
            flex-flow:row wrap;
            text-align: center;
        }
        .flex-container > *{
            padding: 15px;
            flex:1 100%;
            flex:1 100%
        }

        .article{
            text-align: left;
        }
        header{background: black;color: white;}
        footer{background: red;color: white;}
        .nav ul{
            list-style-type: none;
            padding: 0;
        }
        nav ul a{
            text-decoration: none;
            
        }
        @media all and (min-width:768px){
            .nav{
                text-align: left;
                -webkit-flex:1 auto;
                flex:1 auto;
                -webkit-order:1;
                order: 2;
            }
            .article{
                -webkit-flex:5 0px;
                flex: 5 0px;
                -webkit-order:2;
                order:2;
            }

            footer{
                -webkit-order:3;
                order:3;
            }
        }
    </style>
</head>
<body>
    <div class="flex-container">
        <header>
            <h1>城市</h1>
        </header>

        <nav class="nav">
            <ul>
                <li><a href="#">北京</a></li>
                <li><a href="#">巴黎</a></li>
                <li><a href="#">东京</a></li>
            </ul>
        </nav>

        <article class="article">
            <h1>北京</h1>
            <p>
                中国的政治、文化、国际交往和科技创新中心。GDP总量全国领先，兼具历史底蕴与现代活力。
            </p>
            <p>
                跨国公司总部聚集地，世界500强企业中国总部多设于此。
            </p>
        </article>
        <footer>san.com</footer>
    </div>
</body>
</html>