請按照如下布局在pc端實現(xiàn)html和css樣式

　　```

　　要求如下:

　　a)A區(qū)域是header部分，高度100像素，寬度根據(jù)屏幕自適應(yīng)，居頂部展示

　　b)B區(qū)域固定寬度200像素，居左側(cè)展示

　　d)D區(qū)域固定寬度200像素，居右側(cè)展示。

　　e)E區(qū)域高度80像素，寬度自適應(yīng)，當(dāng)整體內(nèi)容不夠滿屏展示，E居屏幕底部展示。

　　f)當(dāng)整體內(nèi)容超出屏幕高度，出現(xiàn)垂直滾動

　　```

```html

<!--結(jié)構(gòu)：-->

<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邊距“無故” 增加 設(shè)置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 當(dāng)元素浮動時，IE6會錯誤的的把浮動方式的margin值雙倍計算，給float的元素添加一個display：inline

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

　　- IE6 絕對定位的元素1px 間距bug 當(dāng)絕對定位的父元素或?qū)挾葹槠鏀?shù)時，bottom和right會多出現(xiàn)1px， 解決方案，針對IE6進行hack處理

　　請寫出XHTML和css如何注釋

　　HTML注釋： 快捷鍵 ctrl+/

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

　　請寫出至少20個HTML5標(biāo)簽

　　```

　　header——標(biāo)記頭部區(qū)域的內(nèi)容(用于整個頁面或頁面中的一塊區(qū)域)

　　footer——標(biāo)記腳部區(qū)域的內(nèi)容(用于整個頁面或頁面中的一塊區(qū)域)

　　section——Web頁面中的一塊區(qū)域

　　article——獨立的文章內(nèi)容

　　aside——相關(guān)內(nèi)容或者引文

　　nav——導(dǎo)航類輔助內(nèi)容

　　main----主要內(nèi)容區(qū)域

　　figure----獨立的文檔流區(qū)域

　　figcaption---獨立文檔流區(qū)域標(biāo)題

　　time------時間標(biāo)簽

　　mark-----著重標(biāo)記,默認高亮背景變黃

　　audio-----音頻

　　video-----視頻

　　canvas----繪圖

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

　　output---- 輸出框

　　var------傾斜標(biāo)簽

　　meter----標(biāo)簽來顯示該給定范圍內(nèi)的數(shù)據(jù)

　　progress--標(biāo)簽顯示某個任務(wù)完成的進度的指示器

　　time------標(biāo)簽用來表示HTML網(wǎng)頁中出現(xiàn)的日期和時間

　　```

　　如何居中一個浮動元素

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

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

　　```CSS

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

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

　　```

　　- 方法二：利用相對定位

　　```CSS

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

　　```

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