html响应式布局

来源：互联网发布：李鸿章袁世凯知乎编辑：程序博客网时间：2024/04/28 12:41

CSS文件：

* {    padding:0px;    margin:0px;}.heading,.container,.footing {    margin:10px auto;}.heading {    height:100px;    background-color:chocolate;}.left, .right, .main {   background-color:#ffd800;}.footing {    background-color:#4cff00;    height:100px;}@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;    }}

html文件：

<!DOCTYPE html><html xmlns="http://www.w3.org/1999/xhtml"><head lang="en"><meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>    <meta name="viewport" content="width=device-width,initial-scale=1"/>    <title></title>    <link href="rd.css" rel="stylesheet" type="text/css">    <!--在屏幕宽度小于等于700时使用样式表，超出就不使用-->   </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>

0 0