2---設計事例

2259 ワード

1.main.html:
<span style="font-size:14px;"><html>
	<head>
		<title> </title>
		<meta charset="utf-8">
		<link rel="stylesheet" type="text/css" href="style1.css" />
	</head>
		
	<body>
		<section id="container">
			<header id="head"><h1>header</h1></header>
			<aside id="left"><h1>left</h1></aside>
			<section id="main"><h1>main</h1></section>
			<aside id="right"><h1>right</h1></aside>
			<footer id="foot"><h1>footer</h1></footer>
		</section>
	</body>
</html></span>

2. style.css:
<span style="font-size:14px;">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;
}

/* 1000px , PC。*/
@media screen and (min-width:1580px) {	
	h1 {
		color:teal;
	}	
}

/*pad 640--1000px*/
@media screen and (min-width:1000px) and (max-width:1550px){
	h1 {
		font-size:40px;
		color:green;
	}
	
	#container {
		width:600px;
	}
	
	#left {
		width:100px;
	}
	
	#main {
		width:490px;
		margin-left:10px;
		margin-right:0;
	}
	
	#right {
		display:none;
	}
}

/* 420--640px*/
@media screen and (max-width:1000px) {
	h1 {
		font-size:30px;
		color:red;
	}
	
	#container {
		width:400px;
	}
	
	#head {
		line-height:80px;
	}
	
	#left {
		width:100%;
		line-height:150px;
		
	}
	
	#main {
		width:100%;
		line-height:400px;
		margin:10px 0;
	}
	
	#right {
		width:100%;
		line-height:150px;
	}
	
	#foot {
		width:100%;
		line-height:80px;
	}
}</span>