<!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{ 100%; height:5rem; margin-bottom:2rem; margin-top:2rem;} section{ 70%; height:20rem; display:inline-block; float:left;} aside{ 20%; height:20rem; display:inline-block; float:right;} footer{ 100%; height:5rem; margin-top:2rem; margin-bottom:2rem; float:left;} @media screen and (min-1000px){ header{background-color:red;} section{ background:red;} aside{ background:red} footer{background:red} } @media screen and (min-480px) and (max-999px){ header{ background:blue} section{ background:blue;} aside{ background: blue} footer{background:blue;} } @media screen and (min-320px) and (max-479px){ header{ background:yellow;} section{ background:yellow; 100%;} aside{ display:none;} footer{ background:yellow;} } </style> </head> <body> <header>头部区域</header> <section>主题区域</section> <aside>侧边区域</aside> <footer>脚部区域</footer> </body> </html>