<!DOCTYPE html><html> <head> ??<style> ??*{ ???????padding:0; ???????margin:0; ??} ???header{ ???????display:block; ???????background-color:red; ???????width 100%; ???????height: 100px; ???} ???nav{display:block; ??????background-color:green; ???????width 100%; ???????height: 36px; ???} ???main{display:block; ???background-color:gray; ???????width 100%; ???????height: 500px; ???} ???main>article{ ???background-color:pink; ???????width: 20%; ???????height: 100%; ???????float:left; ???} ???main>aside{background-color:yellow; ???????width: 80%; ???????height: 100%; ???????float: right; ???????} ???footer{display:block; ???????background-color:skyblue; ???????width 100%; ???????height: 100px; ???} ??</style> ?????</head> <body style="background-image:url(‘9.jpg‘) no-repeat"> ?<script type="text/javascript"> ??// ?IE 9 及以下版本默认是行级元素，而行级元素设置高宽是会被忽略的,所以要加上 display:block 显式指定为块级元素 ?// 解决 IE 8 兼容性问题,方法一是 手动创建标签 ???????document.createElement("header"); ???????document.createElement("nav"); ???????document.createElement("main"); ???????document.createElement("article"); ???????document.createElement("aside"); ???????document.createElement("footer"); ??</script> ???<header> 头部 </header> ???<nav>导航栏</nav> ???<main> ?????<article>左边</article> ?????<aside>右边</aside> ???</main> ???<footer>页脚</footer> </body></html>H5 以及 CSS3
原文地址：https://www.cnblogs.com/Frank99/p/9030032.html