响应式布局

qq_36982315

于 2017-03-16 12:20:26 发布

阅读量229

点赞数

本文链接：https://blog.csdn.net/qq_36982315/article/details/62420433

版权

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">

    <title></title>
    <style>
        *{
            margin:0px;
            padding: 0px;
        }
        .heading, .container, .footing{
            margin: 10px auto;
        }

        .heading{
            height: 100px;
            background-color: red;
        }
        .left,
        .right,
        .main{
            height: 300px;
            background-color: yellow;
        }
        .footing{
            height: 100px;
            background-color: gray;
        }
        @media screen and (min-width: 960px){
            .heading,
            .container,
            .footing{
                width:960px;

            }
            .left,
            .main,
            .right{
                float: left;
                height: 500px;
            }
            .left,
            .right{
                width:200px;

            }
            .main{
                margin: 0px 5px;
                width:550px;
            }
            .container{
                height: 500px;
            }
        }
        @media screen and (min-width: 600px) and (max-width: 960px){
            .heading,
            .container,
            .footing{
                width: 600px;

            }
            .left,
            .main{
                float: left;
                height:400px;

            }
            .right{
                display: none;
            }
            .left{
                width: 160px;

            }
            .main{
                width: 435px;
                margin-left: 5px;
            }
            .container{
                height: 400px;
            }
        }

        @media screen and (max-width: 600px){
            .heading,
            .container,
            .footing{
                width: 400px;
            }
            .left,
            .right{
                width: 400px;
                height: 100px;
            }

            .main{
                margin-top: 10px;
                width:400px;
                height:200px;
            }
            .right{
                margin-top: 10px;

            }
            .container{
                height: 420px;
            }
        }

</style>

</head>
<body>
<div class="heading">

</div>
<div class="container">
    <div class="left"></div>
    <div class="main"></div>
    <div class="right"></div>
</div>
<div class="footing"></div>
</body>
</html>