H5 以及 CSS3

<!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新增语义标签学习
猜你喜欢
