<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>标题</title>
<link type="text/css" rel="stylesheet" href="Untitled-4.css">
<style type="text/css">
@charset "UTF-8";
/* CSS Document */
/*全局通用公共样式*/
* { margin:0; padding:0; }
body { color: #333; font-family:'Arial','Microsoft YaHei'; background:#eee; font-size:62.5%; overflow-x:hidden; overflow-y:scroll;}
ul, ol, li { list-style:none; }
table { border-collapse:collapse; border-spacing:0; table-layout:fixed; /*强制table的宽度,多余内容隐藏*/}
a { color:#666; }
a, a:active, a:hover { text-decoration:none; }
img { vertical-align:top; border:0; }
input, select, textarea, button { vertical-align:middle; outline:none; resize:none; }
button { border:0 none; background-color:transparent; cursor:pointer; }
address, caption, cite, code, dfn, em, var { font-style:normal; font-weight:normal; }
/* 全局兼容 */
.clearfix:after { content:"."; display:block; clear:both; visibility:hidden;/*元素不可见*/ line-height:0; height:0; }
.clearfix { zoom:1; }
/*通用的样式*/
body{ font-size:18px; font-weight:bold; color:white; text-align:center;}
header{ width:100%; height:5rem; margin-bottom:2rem; margin-top:2rem;}
section{ width:70%; height:20rem; display:inline-block; float:left;}
aside{ width:20%; height:20rem; display:inline-block; float:right;}
footer{ width:100%; height:5rem; margin-top:2rem; margin-bottom:2rem; float:left;}
@media screen and (min-width:1000px){
header{background-color:red;}
section{ background:red;}
aside{ background:red}
footer{background:red}
}
@media screen and (min-width:480px) and (max-width:999px){
header{ background:blue}
section{ background:blue;}
aside{ background: blue}
footer{background:blue;}
}
@media screen and (min-width:320px) and (max-width:479px){
header{ background:yellow;}
section{ background:yellow; width:100%;}
aside{ display:none;}
footer{ background:yellow;}
}
</style>
</head>
<body>
<header>头部区域</header>
<section>主题区域</section>
<aside>侧边区域</aside>
<footer>脚部区域</footer>
</body>
</html>
