网页版面设计初试（内容全靠颜色元素块补充）

最新推荐文章于 2023-10-13 13:17:58 发布

狮鹫、

最新推荐文章于 2023-10-13 13:17:58 发布

阅读量73

点赞数

文章标签： css css3 html

本文链接：https://blog.csdn.net/Hereisrubbish/article/details/121054060

版权

<!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>Document</title>
    <link rel="stylesheet" type="text/css" href="../CSS/清楚浏览器默认样式.css">
    <style type="text/css">
    /*因为三个标签的代码存在部分重叠，所以可以写到一起*/
    header,main,footer
    {
        width: 1000px;
        margin: 0 auto;
    }

    /*设置头部*/
    header
    {
        height: 150px;
        background-color: red;
    }

    /*设置主体*/
    main
    {
        height: 500px;
        background-color: blue;
        margin: 10px auto;
    }
    /*设置左侧导航*/
    nav
    {
        width: 200px;
        height: 500px;
        background-color: grey;
        margin-right: 10px;
        /*margin: 0 25px;*/
        float: left;
    }
    /*设置中间的内容*/
    article
    {
        width: 580px;
        height: 500px;
        background-color: yellow;
        /*margin:0 25px;*/
        float: left;
    }
    /*设置中间内容的第一个div*/
    .div1
    {
        float: left;
        background-color: violet;
        height: 220px;
        width: 170px;
        margin-left: 15px;
        margin-right: 10px;
        margin-top: 15px;
        margin-bottom: 15px;
    }
    /*设置中间内容的第二个div*/
    .div2
    {
        float: left;
        background-color: tomato;
        height: 220px;
        width: 170px;
        margin-left: 10px;
        margin-right: 10px;
        margin-top: 15px;
        margin-bottom: 15px;
    }
    /*设置中间内容的第三个div*/
    .div3
    {
        float: left;
        background-color: wheat;
        height: 220px;
        width: 170px;
        margin-left: 10px;
        margin-right: 15px;
        margin-top: 15px;
        margin-bottom: 15px;
    }
    /*设置中间内容的第四个div*/
    .div4
    {
        float: left;
        width: 550px;
        height: 100px;
        background-color: white;
        margin-left: 15px;
        margin-top: 10px;
        margin-bottom: 15px;
    }
    /*设置中间内容的第五个div*/
    .div5
    {
        float: left;
        width: 550px;
        height: 100px;
        background-color:thistle;
        margin-left: 15px;
        margin-top: 10px;
        margin-bottom: 15px;
    }

    /*右边的边栏*/
    aside
    {
        width: 200px;
        height: 500px;
        background-color: grey;
        margin-left: 10px;
        /*margin: 0 25px;*/
        float: right;
    }

    /*设置底部*/
    footer
    {
        height: 150px;
        background-color: green;
        margin: 10px auto;
    }
    </style>
</head>
<body>
    <!--创建头部-->
    <header></header>
    <!--创建网页的主体-->
    <main>
        <!--左侧导航-->
        <nav></nav>

        <!--中间的内容-->
        <article>
            <div class="div1"></div>
            <div class="div2"></div>
            <div class="div3"></div>
            <div class="div4"></div>
            <div class="div5"></div>
        </article>

        <!--右边的边栏-->
        <aside></aside>
    </main>
    <!--网页的底部-->
    <footer></footer>
</body>
</html>