222wan

导航

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>

还是和之前一样我们只做相对应的框架里面的内容后面可以仔细填充注意代码中的注释部分

 

posted on 2023-06-24 01:33  角落的蘑菇  阅读(14)  评论(0)  编辑  收藏  举报