DIV-CSS布局

笨笨的企鹅

已于 2022-10-31 10:06:34 修改

阅读量386

点赞数

分类专栏： Web前端文章标签： html css3 css

于 2022-10-31 10:06:18 首次发布

本文链接：https://blog.csdn.net/baiziyuandyufei/article/details/127609915

版权

Web前端专栏收录该内容

8 篇文章 0 订阅

订阅专栏

DIV-CSS布局

DIV-CSS布局
- DIV-CSS布局

DIV-CSS布局

在这里插入图片描述

<!DOCTYPE html>
<html>

<head>
    <title>Document</title>
    <style type="text/css">
        * {
            /* 外边距4个方向全为0 */
            margin: 0px;
            /* 内边距4个方向全为0*/
            padding: 0px;
        }
        
        a {
            /* 链接默认没有下划线*/
            text-decoration: none;
        }
        
        ul {
            /* 列表默认没有项目符合*/
            list-style: none;
        }
        
        header,
        section,
        footer {
            /* 头 中 尾 默认CSS样式*/
            /* 宽度1000px*/
            width: 1000px;
            /* 居中*/
            margin: 0 auto;
            /* 背景色 粉红色*/
            background-color: pink;
        }
        
        header,
        footer {
            /* 头 尾 给一个80px高度*/
            height: 80px;
        }
        
        section {
            /* 中 上下给20px页边距 矩阵 */
            margin: 20px auto;
            /* 清除浮动，露出底部区域*/
            overflow: hidden;
        }
        
        section>div {
            /* 因为section中左、右两个div是横向排列，所以给一个左浮动*/
            float: left;
            /* 给一个浅灰色背景色*/
            background-color: #ccc;
            /* 预先给一个高度，一会儿还要删掉*/
            /* height: 300px; */
        }
        
        .left {
            /* 中 左边div给700px，因为它稍宽一些*/
            width: 680px;
            /* 给右侧一个边距*/
            margin-right: 20px;
        }
        
        .left>div {
            /* 给left下边的每个div设置200px高度*/
            height: 200px;
            /* 给left下边的每个div设置下边距20px*/
            /* margin-bottom: 20px; */
            /* 背景色*/
            background-color: yellow;
        }
        
        .left>div:nth-child(-n+2) {
            /* 只对.left_one和.left_two进行CSS定义方式2*/
            margin-bottom: 20px;
        }
        
        .left_one>div {
            background-color: yellowgreen;
            height: 100%;
            float: left;
        }
        
        .left_one_1 {
            width: 180px;
        }
        
        .left_one_2 {
            width: 480px;
            margin-left: 20px;
        }
        
        .right {
            /* 中 右边div给300px,因为它稍为窄一些 */
            width: 300px;
        }
        
        .right>div {
            /* 给right下边的每个div设置200px高度 */
            height: 200px;
            background-color: yellow;
        }
        
        .right>div:nth-child(-n+3) {
            /*只对.right下的前3个div设置下边距*/
            margin-bottom: 20px;
        }
    </style>
</head>

<body>
    <header>
        头部区域
    </header>
    <section>
        <div class="left">
            <div class="left_one">
                <div class="left_one_1"></div>
                <div class="left_one_2"></div>
            </div>
            <div class="left_two"></div>
            <div class="left_three"></div>
        </div>
        <div class="right">
            <div class="right_one"></div>
            <div class="right_two"></div>
            <div class="right_three"></div>
            <div class="right_four"></div>
        </div>
    </section>
    <footer>
        底部区域
    </footer>
</body>

</html>