1.main.html:
<html>
<head>
<title>响应式网站布局</title>
<meta charset="utf-8">
<>
<link rel="stylesheet" type="text/css" href="style1.css" />
<link rel="stylesheet" type="text/css" media="screen and (min-width:1580px)" href="pc.css" />
<link rel="stylesheet" type="text/css" media="screen and (min-width:1000px) and (max-width:1550px)" href="pad.css" />
<link rel="stylesheet" type="text/css" media="screen and (max-width:1000px)" href="phone.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:
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;
}
</span><pre name="code" class="css"><span style="font-size:14px;">/*以下针对宽度1550px以上的平台,如PC。*/
@media screen and (min-width:1550px) {
<span style="white-space:pre"> </span>
}
</span>
/*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;
}
</span>
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;
}</span>
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;
}</span>