老师我想问一下?

问题描述：

这种盒模型的布局又该怎样去布局呢？能否以这个为案例帮我敲出代码来，供我参考一下，（即便这要求有一点点过分，但学生我没有法子了，跪求老师帮忙，谢谢）

相关截图：

慕粉1924517932 2021-06-20

源自：盒模型 1-1 课程简介

收起

1回答

好帮手慕星星 2021-06-20 14:00:06

同学你好，按照显示的布局来划分就可以了，参考老师写的：

<!DOCTYPE html>
<html>

<head lang="en">
    <meta charset="UTF-8">
    <style>
        * {
            padding: 0;
            margin: 0;
        }
        
        .center-wrap {
            width: 1200px;
            margin: 0 auto;
        }
        
        header,
        footer {
            background-color: #eee;
        }
        
        header nav,
        main .ad,
        footer p {
            height: 60px;
            background-color: #999;
        }
        
        main .banner {
            margin: 10px 0;
            height: 300px;
            background-color: #999;
        }
        
        main .text {
            margin: 10px 0;
            overflow: hidden;
            font-size: 0;
        }
        
        main .text div {
            display: inline-block;
            width: 33%;
            height: 200px;
            background-color: #999;
            font-size: 16px;
        }
        
        main .text div.left,
        main .text div.mid {
            margin-right: 0.5%;
        }
    </style>
</head>

<body>
    <!-- 顶部 -->
    <header>
        <div class="center-wrap">
            <nav>nav</nav>
        </div>
    </header>
    <!-- 中间 -->
    <main>
        <div class="center-wrap">
            <!-- banner -->
            <div class="banner">banner</div>
            <!-- ad -->
            <div class="ad">ad</div>
            <!-- 三部分 -->
            <div class="text">
                <div class="left">left</div>
                <div class="mid">mid</div>
                <div class="right">right</div>
            </div>
        </div>
    </main>
    <!-- 底部 -->
    <footer>
        <div class="center-wrap">
            <p>copyright</p>
        </div>
    </footer>
</body>

</html>