版面配置(Layout)
語意化的HTML5中為了版面配置，提供了幾個常見的標籤。
- <header></header> 整個頁面的標頭
- <nav></nav> 導覽列
- <section></section> 文檔的一個部分
- <article></article> 文章
- <aside></aside> 側邊欄或任何在側邊的內容
- <footer></footer> 頁尾
- <details></details> 額外的詳細內容
- <summary></summary> <details>的標題
*. details和summary Edge不支援，sample code
*.div、section、article的分辨可參考這篇文章
五種版面配置的技巧
- HTML tables(不推薦)
不要用
- css float
優: 很簡單，記兩個css屬性就好，float, clear
缺: 彈性很差，因為float跟文件內容有很大的關聯性，只要稍微修改就必須調整整體頁面
- css flexbox
優: 考量各種裝置情境
缺: 不支援ie10之前的版本
- css framework
- bootstrap
- w3.css
- ...
- css grid
優: 跟flexbox帶來的好處非常類似，在處理不同螢幕解析度的需求上更為強大
缺: 不支援ie，不支援Edge15之前的版本
沒有留言:
張貼留言