网页基本布局

网页基本布局

1.先行后列
2.先整体后局部

<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
    body,div,ul {
        margin: 0;
        padding: 0;
    }
    div {
        background-color: lightblue;
        margin-bottom: 10px;     
    };
    .header {
        height: 50px;
    }
    .middle {
        /* 定宽居中：为了适配小屏幕的电脑和手机， 让主体内容宽度较为窄，两边留白。
        实现思路，主体内容固定宽度，主体div相对父容器body左右外边距auto */
        width: 1200px;
        margin: 0 auto;  /*（1366-1200）/2    auto自动计算左右边距    */
        height: 600px;
        background-color: blue;
    }
    /* .middle:after {
        content: "";
        clear: both;
        display: block;
    } */
    .clear {
        clear: both;
    }
    .sidebar {
        float: left;
        /* 头部导航、底部div建议height写死。
           主体内容div、左右边栏div建议写百分比自动计算，因为浏览器横向宽度会变、纵向高度通过滚动条。 
        */
        width: 20%;
        height: 100%;
        background-color: rgb(0, 255, 255);
    }
    .main-content {
        float: left;
        width: 60%;
        height: 100%;   /* 相对父容器的百分比 */
        background-color: rgb(0, 255, 34);
    }
    .sidebar-right {
        float: left;
        width: 20%;
        height: 100%;
        background-color: rgb(47, 0, 255);
    }
    .upper-right {
        width: 100%;
        height: 140px;
        background-color: rgba(0, 255, 157, 0.534);
    }
    .center-right {
        width: 100%;
        height: 300px;
        background-color: rgb(43, 92, 226);
    }
    .lower-right {
        width: 100%;
        height: 140px;
    }
    /* 注：中右三部分加内边框部分的像素一定要等于中部部分像素。 */
    .footer {
        height: 100px;
        background-color:blue;
    }
</style>
</head>

<div class="header">头</div>
<div class="middle">
    <div class="sidebar">中左</div>
    <div class="main-content">中间主题内容</div>
    <div class="sidebar-right">
        <div class="upper-right">右上</div>
        <div class="center-right">右中</div>
        <div class="lower-right">右下</div>
    </div>
</div>
<div class="footer">底部</div>
</body>
</html>