Css3首页响应式布局的实现
时间：5年前 阅读：6188
<!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,我们将及时处理。
微信扫码关注
更新实时通知
网友评论