HTML5新增的几个容器模块

  1 <!DOCTYPE html>
  2 <html lang="en">
  3 
  4 <head>
  5 <meta charset="UTF-8">
  6 <meta name="viewport" content="width=device-width, initial-scale=1.0">
  7 <meta http-equiv="X-UA-Compatible" content="ie=edge">
  8 <title>Document</title>
  9 <!-- H5新增的几个容器块元素：
 10 1、header:用户表示页面或某个区域的头部
 11 2、nav:用于表示导航栏
 12 3、aside:用于表示跟周围主题相关的附加信息
 13 4、article:用于表示一个整体的一部分主题
 14 
 15 5、section:表示右边的侧边栏
 16 6、footer:用于表示页面或某个区域的脚注
 17 
 18 现在这里来教大家怎么使用 -->
 19 
 20 
 21 <!-- 内联样式表 -->
 22 <style>
 23 * {
 24 margin: 0;
 25 padding: 0;
 26 }
 27 
 28 .box {
 29  80%;
 30 text-align: center;
 31 font-size: 30px;
 32 margin: 10px auto;
 33 }
 34 
 35 header {
 36  100%;
 37 height: 100px;
 38 outline: 1px solid red;
 39 line-height: 100px;
 40 }
 41 
 42 .box1 {
 43  100%;
 44 position: relative;
 45 height: 550px;
 46 }
 47 
 48 nav {
 49  70%;
 50 height: 50px;
 51 outline: 1px solid black;
 52 position: absolute;
 53 left: 0px;
 54 top: 0px;
 55 line-height: 50px;
 56 }
 57 
 58 aside {
 59  30%;
 60 height: 50px;
 61 outline: 1px solid blue;
 62 position: absolute;
 63 right: 0px;
 64 top: 0px;
 65 line-height: 50px;
 66 }
 67 
 68 article {
 69  70%;
 70 height: 500px;
 71 outline: 1px pink solid;
 72 position: absolute;
 73 left: 0px;
 74 top: 50px;
 75 line-height: 500px;
 76 }
 77 
 78 section {
 79  30%;
 80 height: 500px;
 81 outline: 1px yellow solid;
 82 position: absolute;
 83 right: 0px;
 84 top: 50px;
 85 line-height: 500px;
 86 }
 87 
 88 footer {
 89  100%;
 90 height: 100px;
 91 outline: 1px solid rebeccapurple;
 92 line-height: 100px;
 93 }
 94 </style>
 95 </head>
 96 
 97 <body>
 98 <div class="box">
 99 <header>我是网页的头部</header>
100 <div class="box1">
101 <nav> 我是左边的导航栏</nav>
102 <aside>我是右边的导航栏</aside>
103 <article>我是主体内容</article>
104 <section>我是右边的侧边栏</section>
105 </div>
106 <footer>我是底部</footer>
107 </div>
108 </body>
119 </html>