請按照如下布局在pc端實現(xiàn)html和css樣式
```
要求如下:
a)A區(qū)域是header部分，高度100像素，寬度根據(jù)屏幕自適應，居頂部展示
b)B區(qū)域固定寬度200像素，居左側展示
d)D區(qū)域固定寬度200像素，居右側展示。
e)E區(qū)域高度80像素，寬度自適應，當整體內(nèi)容不夠滿屏展示，E居屏幕底部展示。
f)當整體內(nèi)容超出屏幕高度，出現(xiàn)垂直滾動
```
```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下就會觸發(fā)躲貓貓。 1.在(那個未浮動的)內(nèi)容之后添加一個 2.觸發(fā)包含了這些鏈接的容器的hasLayout，一個簡單的方法就是給其定義height:1%;
- IE6 絕對定位的元素1px 間距bug 當絕對定位的父元素或寬度為奇數(shù)時，bottom和right會多出現(xiàn)1px， 解決方案，針對IE6進行hack處理
請寫出XHTML和css如何注釋
HTML注釋： 快捷鍵 ctrl+/
CSS注釋：/* */ 快捷鍵 ctrl+/
請寫出至少20個HTML5標簽
```
header——標記頭部區(qū)域的內(nèi)容(用于整個頁面或頁面中的一塊區(qū)域)
footer——標記腳部區(qū)域的內(nèi)容(用于整個頁面或頁面中的一塊區(qū)域)
section——Web頁面中的一塊區(qū)域
article——獨立的文章內(nèi)容
aside——相關內(nèi)容或者引文
nav——導航類輔助內(nèi)容
main----主要內(nèi)容區(qū)域
figure----獨立的文檔流區(qū)域
figcaption---獨立文檔流區(qū)域標題
time------時間標簽
mark-----著重標記,默認高亮背景變黃
audio-----音頻
video-----視頻
canvas----繪圖
datalist---模擬虛擬搜索列表
output---- 輸出框
var------傾斜標簽
meter----標簽來顯示該給定范圍內(nèi)的數(shù)據(jù)
progress--標簽顯示某個任務完成的進度的指示器
time------標簽用來表示HTML網(wǎng)頁中出現(xiàn)的日期和時間
```
如何居中一個浮動元素
單純的浮動元素其實不是很好居中的，除非你再給他嵌套一個盒子，那這也就不是給浮動盒子居中了;要么就是加相對定位進行輔助，具體代碼如下：
- 方法一：嵌套一個父盒子
```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培訓的問題，歡迎咨詢千鋒教育在線名師，如果想要了解我們的師資、課程、項目實操的話可以點擊咨詢課程顧問，獲取試聽資格來試聽我們的課程，在線零距離接觸千鋒教育大咖名師，讓你輕松從入門到精通。
京公網(wǎng)安備 11010802030320號