网页的简单布局

最新推荐文章于 2022-08-05 16:56:29 发布

极客研究者

最新推荐文章于 2022-08-05 16:56:29 发布

阅读量194

点赞数

分类专栏： CSS样式表前端文章标签： css html html5 css3 web

本文链接：https://blog.csdn.net/qq_34550459/article/details/105571097

版权

CSS样式表同时被 2 个专栏收录

39 篇文章 0 订阅

订阅专栏

前端

18 篇文章 0 订阅

订阅专栏

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

<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">
    <link rel="stylesheet" href="../css/reset.css">
    <title>网页的简单布局</title>
    <style>

        /*外部容器的布局 */
        .div1{
            margin:30px auto;
            width:1210px;
        }

        /*头部样式*/
        header{
            height:100px;
            background-color: aqua;
        }


        nav,article,aside{
            height: 100%;
            float:left;
        }

        /*主题部分的样式 */
        main{
            height:400px;
            /* background-color: brown; */
            margin: 10px auto;
        }

        /* 导航栏部分样式 */
        nav{
            width:290px;
            background-color: darkblue;
        }

        /* 中间主题部分的样式 */
        article{
            width:600px;
            background-color: darkorange;
            margin:auto 10px;
        }

        /* 右侧部分样式 */
        aside{
            width:300px;
            background-color: darkred;
        }
        /*顶部样式 */
        footer{
            height: 100px;
            background-color: chartreuse;
        }
    
    </style>
</head>

<body>
    <div class="div1">
        <!-- 网页的头部 -->
        <header>


        </header>
        
        <!-- 网页的主题 -->
        <main>
            <!-- 左侧导航栏 -->
            <nav></nav>
            <!-- 主题部分 -->
            <article></article>
            <!-- 右侧部分 -->
            <aside></aside>
        </main>
        <!-- 网页的顶部 -->
        <footer>
        </footer>
    </div>
</body>

</html>

极客研究者

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
网页的简单布局

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-...
复制链接

扫一扫

专栏目录