請按照如下布局在pc端實現html和css樣式

　　```

　　要求如下:

　　a)A區域是header部分，高度100像素，寬度根據屏幕自適應，居頂部展示

　　b)B區域固定寬度200像素，居左側展示

　　d)D區域固定寬度200像素，居右側展示。

　　e)E區域高度80像素，寬度自適應，當整體內容不夠滿屏展示，E居屏幕底部展示。

　　f)當整體內容超出屏幕高度，出現垂直滾動

　　```

```html

<!--結構：-->

<div class="outer">

    <header>a</header>

    <main>

        <div class="left">b</div>

        <div class="right">d</div>

    </main>

    <footer>e</footer>

</div>

<!--樣式部分：-->

<style>

    *{

        margin: 0;

        padding: 0;

    }

    header{

        width: 100%;

        height: 200px;

        background-color: skyblue;

    }

    .left{

        width: 200px;

        background-color: slateblue;

    }

    .right{

        width: 200px;

        background-color: springgreen;

    }

    footer{

        height: 80px;

        background-color: tomato;

    }

    .outer{

        width: 100vw;

        min-height: 100vh;

        display: flex;

        flex-direction: column;

    }

    main{

        flex: 1;

        display: flex;

        justify-content: space-between;

    }

</style>

```

　　請戳出ie6/7下特有的cssbug

　　- li邊距“無故” 增加 設置ul的顯示形式為display:inline一block;即可，前面加是只 針對IE6/IE7有效

　　- IE6 不支持min-height屬性，但它卻認為height就是最小高度 使用ie6不支持但其余瀏覽器支持的屬性!important。

　　- Overflow: 在IE6/7中，overflow無法正確的隱藏有相對定位position:relative;的子元素。解決方法就是給外包容器.wrap加上position:relative;。

　　- border：none 在IE6不起作用： 寫成border：0 就可以了 五:100%高度 在IE6下，如果要給元素定義100%高度，必須要明確定義它的父級元素的高度，如果你需要給元素定義滿屏的高度，就得先給html和body定義 height:100%;。

　　- 雙邊距 Bug 當元素浮動時，IE6會錯誤的的把浮動方式的margin值雙倍計算，給float的元素添加一個display：inline

　　- 躲貓貓bug 定義了:hover的鏈接，當鼠標移到那些鏈接上時，在IE6下就會觸發躲貓貓。 1.在(那個未浮動的)內容之后添加一個 2.觸發包含了這些鏈接的容器的hasLayout，一個簡單的方法就是給其定義height:1%;

　　- IE6 絕對定位的元素1px 間距bug 當絕對定位的父元素或寬度為奇數時，bottom和right會多出現1px， 解決方案，針對IE6進行hack處理

　　請寫出XHTML和css如何注釋

　　HTML注釋： 快捷鍵 ctrl+/

　　CSS注釋：/* */ 快捷鍵 ctrl+/

　　請寫出至少20個HTML5標簽

　　```

　　header——標記頭部區域的內容(用于整個頁面或頁面中的一塊區域)

　　footer——標記腳部區域的內容(用于整個頁面或頁面中的一塊區域)

　　section——Web頁面中的一塊區域

　　article——獨立的文章內容

　　aside——相關內容或者引文

　　nav——導航類輔助內容

　　main----主要內容區域

　　figure----獨立的文檔流區域

　　figcaption---獨立文檔流區域標題

　　time------時間標簽

　　mark-----著重標記,默認高亮背景變黃

　　audio-----音頻

　　video-----視頻

　　canvas----繪圖

　　datalist---模擬虛擬搜索列表

　　output---- 輸出框

　　var------傾斜標簽

　　meter----標簽來顯示該給定范圍內的數據

　　progress--標簽顯示某個任務完成的進度的指示器

　　time------標簽用來表示HTML網頁中出現的日期和時間

　　```

　　如何居中一個浮動元素

　　單純的浮動元素其實不是很好居中的，除非你再給他嵌套一個盒子，那這也就不是給浮動盒子居中了;要么就是加相對定位進行輔助，具體代碼如下：

　　- 方法一：嵌套一個父盒子

　　```CSS

　　.container{width:200px;margin:0 auto;} /*設置父盒子的寬度和子盒子一樣就可以了*/

　　.container .inner{width:200px; float:left}

　　```

　　- 方法二：利用相對定位

　　```CSS

　　.box{width:200px;float:left; position:relative;left:50%; margin-left:-100px}

　　```

　　更多關于html5培訓的問題，歡迎咨詢千鋒教育在線名師，如果想要了解我們的師資、課程、項目實操的話可以點擊咨詢課程顧問，獲取試聽資格來試聽我們的課程，在線零距離接觸千鋒教育大咖名師，讓你輕松從入門到精通。