《HTML5的整体布局》一

最新推荐文章于 2023-12-30 18:49:56 发布

道墨思冥

最新推荐文章于 2023-12-30 18:49:56 发布

阅读量120

点赞数

分类专栏：五、前端文章标签： html5 html css

CSDN-ThinkLnk/B站-道墨思

本文链接：https://blog.csdn.net/qq_39395109/article/details/126258166

版权

五、前端专栏收录该内容

15 篇文章 0 订阅

订阅专栏

HTML与CSS的样式===》参考

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

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>html5布局</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        body {
            background-color: rgb(200, 65, 84);
            margin: 80px auto;
        }

        /*背景白色*/
        .color {
            background-color: rgb(255, 255, 255);
        }

        /*单独上边距*/
        header {
            border-bottom: 1px solid rgb(200, 65, 84);
        }

        .middle {
            margin: auto;
        }

        /*浮动-主*/
        .left {
            float: left;
        }

        /*样式-主*/
        .style_main {
            margin: 0 auto;
            width: 86%;
            height: 80px;
        }

        /*内容-样式*/
        section {
            border-top: 22px solid rgb(200, 65, 84);
            margin-top: 20px;
            width: 86%;
            height: 560px;
        }

        .back_section {
            background-color: rgb(79, 78, 79);
        }

        /*单独_高度*/
        .L_height {
            height: 418px;
        }

        /*单独体_无重复*/
        aside {
            width: 39%;
            margin: 6% 5% 5% 5%;
        }

        /*单独体_无重复*/
        article {
            padding-top: 5%;
            width: 46%;
            margin: 6% 5% 5% 0%;
            box-sizing: border-box;
        }

        /*article内容的背景颜色*/
        .article_back {
            background-color: rgb(202, 65, 80);
        }

        /*三个内容的宽度*/
        .width {
            width: 80%;
        }

        /*hgroup和dialog内容的高度*/
        .h_d_height {
            height: 16%;
        }

        /*p标签和dialog的上边距*/
        .top_p_d {
            margin-top: 12px;
        }

        /*独 上边距*/
        hgroup {
            margin: auto;
            width: 80%;
            height: 16%;
        }

        /*独 高*/
        p {
            height: 36%;
        }

        /*此内容的上边距*/
        footer {
            border-top: 50px solid rgb(200, 65, 84);
        }
    </style>
</head>

<body>
    <!-- <h1>body</h1> -->
    <header class="color style_main">

    </header>
    <nav class="color style_main">

    </nav>
    <section class="color middle">
        <aside class="back_section L_height left"></aside>
        <article class="back_section L_height left">
            <hgroup class="article_back width h_d_height middle"></hgroup>
            <p class="article_back width top_p_d middle"></p>
            <div class="middle article_back width h_d_height top_p_d"></div>
        </article>
    </section>
    <footer class="color style_main"></footer>

</body>
</html>

这次的css样式放入到html里面了，且代码框架样式从上而下

从左而又，编辑从外而内，整体合理