請按照如下布局在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培訓的問題，歡迎咨詢千鋒教育在線名師，如果想要了解我們的師資、課程、項目實操的話可以點擊咨詢課程顧問，獲取試聽資格來試聽我們的課程，在線零距離接觸千鋒教育大咖名師，讓你輕松從入門到精通。
京公網安備 11010802030320號