H5 以及 CSS3

时间：2018-05-12 22:35:50 阅读：229 评论：0 收藏：0 [点我收藏+]

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

技术分享图片

H5 以及 CSS3

标签：pre 头部手动 style 导航 url span ide alt

原文地址：https://www.cnblogs.com/Frank99/p/9030032.html

踩

(0)

评论一句话评论（0）

分享档案

更多>

2021年07月29日 (22)
2021年07月28日 (40)
2021年07月27日 (32)
2021年07月26日 (79)
2021年07月23日 (29)
2021年07月22日 (30)
2021年07月21日 (42)
2021年07月20日 (16)
2021年07月19日 (90)
2021年07月16日 (35)

周排行