Css3首页响应式布局的实现
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <!-- 这里min-width:1211px)设置大的原因是1191这个刚好的时候出现滚动条不好看，设置大点 --> <link rel="stylesheet" href="../sw/t01.css" media="screen and (min-width:1211px)"> <link rel="stylesheet" href="../sw/t02.css" media="screen and (max-width:1210px)"> <!-- <style type="text/css"> *{ padding: 0; margin: 0; } #gg{ width: 100%; height: 80%; background: #F8DFD2; } #gg a{ display: block; margin: 0 auto; width: 990px; height: 80px; background: url(../sw/ty01.jpg) no-repeat center center; } #mftu{ width: 100%; height: 30px; background: #E3E4E5; } #mftu .heef{ width: 990px; height: 30px; border-left: 3px solid orangered; border-right: 3px solid orangered; margin: 0 auto; } #mftu .heef .rou{ width: 800px; height: 30px; float: right; background: blue; } #mrh{ width: 990px; height: 100px; background: hotpink; margin: 0 auto; } #nsrtjh{ width: 990px; height: 450px; border: 2px solid blue; margin: 0 auto; } #nsrtjh .gerg{ width: 200px; height: 450px; background: #6E6568; float: left; } #nsrtjh .herf{ width: 590px; height: 450px; background: green; float: left; } #nsrtjh .yuej{ width: 200px; height: 450px; background: #303036; float: left; } </style> --> </head> <body> <!-- 顶部广告 --> <div id="gg"> <a href=""></a> </div> <!-- 顶部广告结束 --> <!-- 灰色区域 --> <div id="mftu"> <div class="heef"> <div class="rou"></div> </div> </div> <!-- 灰色区域结束 --> <!-- 搜索区域 --> <div id="mrh"> </div> <!-- 搜索区域结束 --> <!-- 大块开始 --> <div id="nsrtjh"> <div class="gerg"></div> <div class="herf"></div> <div class="yuej"></div> </div> <!-- 大块结束 --> </body> </html> 本站声明:网站内容来源于网络,如有侵权,请联系我们https://www.qiquanji.com,我们将及时处理。
微信扫码关注
更新实时通知