H5新增的幾個容器塊元素：1、header:用戶表示頁面或某個區域的頭部2、nav:用於表示導航欄3、aside:用於表示跟周圍主題相關的附加信息4、article:用於表示一個整體的一部分主題 5、section:表示右邊的側邊欄6、footer:用於表示頁面或某個區域的腳註 現在這裡來教大家怎麼 ...
H5新增的幾個容器塊元素：
1、header:用戶表示頁面或某個區域的頭部
2、nav:用於表示導航欄
3、aside:用於表示跟周圍主題相關的附加信息
4、article:用於表示一個整體的一部分主題
5、section:表示右邊的側邊欄
6、footer:用於表示頁面或某個區域的腳註
現在這裡來教大家怎麼使用
<!DOCTYPE html> <html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> <!-- 內聯樣式表 --> <style> * { margin: 0; padding: 0; }
.box { width: 80%; text-align: center; font-size: 30px; margin: 10px auto; }
header { width: 100%; height: 100px; outline: 1px solid red; line-height: 100px; }
.box1 { width: 100%; position: relative; height: 550px; }
nav { width: 70%; height: 50px; outline: 1px solid black; position: absolute; left: 0px; top: 0px; line-height: 50px; }
aside { width: 30%; height: 50px; outline: 1px solid blue; position: absolute; right: 0px; top: 0px; line-height: 50px; }
article { width: 70%; height: 500px; outline: 1px pink solid; position: absolute; left: 0px; top: 50px; line-height: 500px; }
section { width: 30%; height: 500px; outline: 1px yellow solid; position: absolute; right: 0px; top: 50px; line-height: 500px; }
footer { width: 100%; height: 100px; outline: 1px solid rebeccapurple; line-height: 100px; } </style> </head>
<body> <div class="box"> <header>我是網頁的頭部</header> <div class="box1"> <nav> 我是左邊的導航欄</nav> <aside>我是右邊的導航欄</aside> <article>我是主體內容</article> <section>我是右邊的側邊欄</section> </div> <footer>我是底部</footer> </div> </body>
</html>
