16
2020
04

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/post/7475.html

本站声明:网站内容来源于网络,如有侵权,请联系我们,我们将及时处理。

微信扫码关注

更新实时通知

« 上一篇 下一篇 »

发表评论:

◎欢迎参与讨论,请在这里发表您的看法、交流您的观点。