master

分支 (1)

管理

管理

master

front-end-lian-xi
/
82.html

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<style>
    header,
    nav,
    article,
    section,
    aside,
    footer {
        background-color: #666;
    }

    p {
        line-height: 50px;
    }

    .container {
        width: 1200px;
        margin: 0 auto;
    }

    .container header {
        width: 100%;
        height: 60px;
        margin-bottom: 10px;
    }

    .container nav {
        width: 100%;
        height: 60px;
        margin-bottom: 10px;
    }

    .container .main {
        width: 100%;
        display: flex;
        margin-bottom: 10px;
    }

    .container .main article {
        flex: 0 0 200px;
    }

    .container .main section {
        flex: 1;
        margin: 0 10px;
    }

    .container .main aside {
        flex: 0 0 200px;
    }

    .container footer {
        width: 100%;
        height: 60px;
    }
</style>

<body>
    <div class="container">
        <header></header>
        <nav></nav>
        <!-- 网页主要内容部分 -->
        <div class="main">
            <article></article>
            <section>
                <p>内容部分</p>
                <p>内容部分</p>
                <p>内容部分</p>
                <p>内容部分</p>
            </section>
            <aside></aside>
        </div>
        <footer></footer>
    </div>
</body>

</html>