html5新增标签及兼容 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>    </title>
<script>
document。createElement("header");
document.createElement("article");
document.createElement("aside");
document.createElement("section");
document.createElement("footer");
</script>
<style>
body{margin:0;}
header{height: 100px; background: #9F3; display: block;}
article{padding:10px; background: #CF6; overflow: hidden; zoom:1; position: relative; display: block;}
section{margin-left:210px; background:#F90; height:300px; width: 800px; position: absolute; left: 10px;top: 10px; display: block;}
aside{width:200px; height:300px; background: #F90; height:300px; display: block;}
footer{height:100px; background: #C6C; display: block;}
</style>
</head>
<body>
    <header>页面头部部分</header>
<article>
  <aside>侧边栏</aside>
  <section>内容区域</section>
</article>
<footer>内容部分</footer>
</body>
</html>

兼容ie 6 7 8

posted @ 2016-12-31 18:34  distant-遥远  阅读(185)  评论(0)  编辑  收藏  举报