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 width: 80%; 30 text-align: center; 31 font-size: 30px; 32 margin: 10px auto; 33 } 34 35 header { 36 width: 100%; 37 height: 100px; 38 outline: 1px solid red; 39 line-height: 100px; 40 } 41 42 .box1 { 43 width: 100%; 44 position: relative; 45 height: 550px; 46 } 47 48 nav { 49 width: 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 width: 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 width: 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 width: 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 width: 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>
