html19常见网页布局

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>常见网页布局</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }
        .top {
            width: 100%;/*这里可以不用写因为默认块级元素和网页一样宽*/
            height: 70px;
            background-color: teal;
        }
        .banner {
            width:980px ;
            height:150px ;
            margin: 10px auto;
            background-color: rgb(82, 62, 48);
        }
        .box {
            width: 980px;
            height: 300px;
            background-color: thistle;
            margin: 0 auto;
        }
        li {
            list-style: none;/*去除小li的样式*/
        }
        .box .box_top {
            width:241px ;
            height:300px ;
           
            margin-right: 5px;
            float: left;
            background-color: tomato;
        }
       .box .last {/*这里一定要注意去掉最后一个盒子的右边距不然装不下然后还要注意权重类选择器的权重*/
            margin-right: 0;
        }
        .footer {
            height: 159px;
            background-color: yellowgreen;
            margin-top: 10px;
        }

    </style>
</head>
<body>
    <div class="top">top顶部</div>
    <div class="banner">banner中部</div>
    <div class="box">
        <ul>
            <li class="box_top">1</li>
            <li class="box_top">2</li>
            <li class="box_top">3</li>
            <li class="box_top last">4</li>
        </ul>
        
    </div>
    <div class="footer">footre底部</div>
</body>
</html>