响应式布局

来源：互联网发布：软件项目经理证书挂靠编辑：程序博客网时间：2024/05/17 22:53

<style type="text/css">/*屏幕宽度大于900的时候*/*{    padding:0px;    margin:0px;    font-family:"微软雅黑";}#header{    height:100px;    border:solid 1px red;    margin:0px auto;}#main{    margin:10px auto;    height:400px;}#footer{    margin:0px auto;    height:100px;    border:solid 1px red;}@media screen and (min-width:900px){    #header,#footer    {        width:800px;    }    #main    {        width:800px;        height:400px;;    }    #main-left    {        width:200px;        height:400px;        border:solid 1px red;        float:left;    }    #main-center    {        width:394px;        height:400px;        border:solid 1px red;        float:left;    }    #main-right    {        width:200px;        height:400px;        border:solid 1px red;        float:left;    }}@media screen and (min-width:600px) and (max-width:900px){    #header,#footer    {        width:600px;    }    #main    {        width:600px;        height:400px;;    }    #main-left    {        width:200px;        height:400px;        border:solid 1px red;        float:left;    }    #main-center    {        width:396px;        height:400px;        border:solid 1px red;        float:left;    }    #main-right    {        display:none;    }}@media screen and (max-width:600px){    #header,#footer    {        width:300px;    }    #main    {        width:300px;        height:400px;;    }    #main-left    {        display:none;    }    #main-center    {        width:300px;        height:400px;        border:solid 1px red;    }    #main-right    {        display:none;    }}</style></head><body><div id="header">头部</div><div id="main">  <div id="main-left">主题-左边</div>  <div id="main-center">主题-中间</div>  <div id="main-right">主题-右边</div></div><div id="footer"></div></body>

来源：http://www.cnblogs.com/ruanmou/p/4832214.html 的底下一小部分

0 0