3-- 디자인 사례 스타일 파일의 또 다른 도입 방식

2372 단어
1.main.html:

	
		       
		
		<>
		
		
		
		
	
		
	
		

main

footer


2.style.css:
body {
	padding:0;
	margin:0;
	border:0;
}

h1 {
	font-size:50px;
	color:gold;
	text-align:center;
}

#container {
	width:1280px;
	margin:0 auto;
	background:red;
}

#head {
	width:100%;
	line-height:100px;
	float:left;
	margin:10px 0;
	background:#000;
}

#left {
	width:200px;
	line-height:580px;
	float:left;
	background:#000;
}

#main {
	width:860px;
	line-height:580px;
	float:left;
	margin:0 10px;
	background:#000;
}

#right {
	width:200px;
	line-height:580px;
	float:right;
	background:#000;
}

#foot {
	width:100%;
	line-height:100px;
	float:left;
	margin:10px 0;
	background:#000;
}

/*      1550px     , PC。*/
@media screen and (min-width:1550px) {
	
}

/*pad 1000-1550px*/@media screen and(min-width:1000px) and(max-width:1550px) {}/*핸드폰 420-1000px*/@media screen and(max-width:1000px) {}
 
  3.pc.css: 
   
   
  
/*      1000px     , PC。*/
	
h1 {
	color:teal;
}	

4.pad.css:
h1 {
	font-size:40px;
	color:green;
}

#container {
	width:600px;
}

#left {
	width:100px;
}

#main {
	width:490px;
	margin-left:10px;
	margin-right:0;
}

#right {
	display:none;
}

5.phone.css:
h1 {
	font-size:30px;
	color:red;
}

#container {
	width:400px;
}

#head {
	line-height:80px;
}

#left {
	display:none;
}

#main {
	width:100%;
	line-height:400px;
	margin:10px 0;
}

#right {
	display:none;
}

#foot {
	width:100%;
	line-height:80px;
}

좋은 웹페이지 즐겨찾기