[Web][RWD]3.實作練習

文、意如

實作練習:

電腦寬80% ,

平板、手機寬100%

第二列分四塊(內容置中顯示)

第三列分兩塊(內容置中顯示)

完成檔如下

電腦版尺寸
手機平板尺寸

 

index.html

<html>
<head>
<title></title>
<style>
/**電腦**/	
@media only screen and (min-width: 769px) {
	h1{
		color:#03F;
		text-align:center; 
		
	}
	
	#wrapper{
		background-color:green; 
		width:80%;
		margin:0 auto;
	}
	
	#main{
		background-color:yellow;
		width:100%;
		margin:0 auto;
		text-align:center; 
	}
	
	#main1{
		background-color:blue;
		width:25%;
		float:left;
		
	}
	
	#main2{
		background-color:blue;
		width:25%;
		float:left;
	}
	
	#main3{
		background-color:blue;
		width:25%;
		float:left;
		
	}
	
	#main4{
		background-color:blue;
		width:25%;
		float:left;
		
	}
	
	#content{
		background-color:orange;
		width:100%;
		margin:0 auto;
		text-align:center; 
	}
	
	#content1{
		background-color:orange;
		width:50%;
		float:left;
	}
	
	#content2{
		background-color:orange;
		width:50%;
		float:left;
	}
	
	
}

/**手機,平板**/	
@media only screen and (min-width: 0px) and (max-width: 768px) {
	h1{
		color: #F00;
		text-align:center; 
	}
	
	#wrapper{
		background-color:orange; 
		width:100%;
		margin:0 auto;
	}
	
	#main{
		background-color:yellow;
		width:100%;
		margin:0 auto;
		text-align:center; 
	}
	
	#main1{
		background-color:yellow;
		width:25%;
		float:left;
		
	}
	
	#main2{
		background-color:yellow;
		width:25%;
		float:left;
	}
	
	#main3{
		background-color:yellow;
		width:25%;
		float:left;
		
	}
	
	#main4{
		background-color:yellow;
		width:25%;
		float:left;
		
	}
	
	#content{
		background-color:pink;
		width:100%;
		margin:0 auto;
		text-align:center; 
	}
	
	#content1{
		background-color:pink;
		width:50%;
		float:left;
	}
	
	#content2{
		background-color:pink;
		width:50%;
		float:left;
	}
}
	
	
	</style>
</head>
<body>
<div id="wrapper">
	<h1>Header</h1>
	<div id="main">
		<div id="main1"><img src="images/logo1.jpg" width="25%"></div>
		<div id="main2"><img src="images/logo1.jpg" width="25%"></div>
		<div id="main3"><img src="images/logo1.jpg" width="25%"></div>
		<div id="main4"><img src="images/logo1.jpg" width="25%"></div>
	</div>
	
	<div id="content">
		<div id="content1"><img src="images/logo1.jpg" width="50%"></div>
		<div id="content2"><img src="images/logo1.jpg" width="50%"></div>
		
	</div>
	
	<h1>Footer</h1>
</div>


</body>
</html>

 

YiruAtStudio - 關於我 - 意如