html的网页布局以及相关笔记

最新推荐文章于 2024-06-20 12:53:56 发布

snsd_cc

最新推荐文章于 2024-06-20 12:53:56 发布

阅读量117

点赞数

分类专栏：基础

本文链接：https://blog.csdn.net/snsd_cc/article/details/102399038

版权

基础专栏收录该内容

2 篇文章 0 订阅

订阅专栏

在这里插入图片描述
相关代码如下：

<!DOCTYPE html>
<html lang="zh-cn">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        body{
            text-align: center;
        }
        body *{
            background: #FDEAD9;
            margin: 20px;
        }
        header{
            height: 100px;
        }
        main{
            height: 300px;
            text-align: center;
        }
        main > *{
            display: inline-block;
            background:  rgb(167, 153, 141);
            height: 90%;
            vertical-align: top;
        }
        main > nav{
            width: 20%;
        }
        main > article{
            width: 60%;
        }
        article section{
            height: 25% ;
        }
        footer{
            height: 100px;
        }
    </style>

</head>
<body>
    <header>头部/标题</header>
    <main>
        <!-- main的左边内容 -->
        <nav>相关导航</nav>
        <article>
            <section>抽抽</section>
            <section>学习</section>
            <section>笔记</section>
        </article>
    </main>
    <footer>尾部标签</footer>
</body>
</html>