請(qǐng)按照如下布局在pc端實(shí)現(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)垂直滾動(dòng)

　　```

```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>

```

　　請(qǐng)戳出ie6/7下特有的cssbug

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

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

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

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

　　- 雙邊距 Bug 當(dāng)元素浮動(dòng)時(shí)，IE6會(huì)錯(cuò)誤的的把浮動(dòng)方式的margin值雙倍計(jì)算，給float的元素添加一個(gè)display：inline

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

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

　　請(qǐng)寫出XHTML和css如何注釋

　　HTML注釋： 快捷鍵 ctrl+/

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

　　請(qǐng)寫出至少20個(gè)HTML5標(biāo)簽

　　```

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

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

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

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

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

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

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

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

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

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

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

　　audio-----音頻

　　video-----視頻

　　canvas----繪圖

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

　　output---- 輸出框

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

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

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

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

　　```

　　如何居中一個(gè)浮動(dòng)元素

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

　　- 方法一：嵌套一個(gè)父盒子

　　```CSS

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

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

　　```

　　- 方法二：利用相對(duì)定位

　　```CSS

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

　　```

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