更新時間:2020-08-14 12:15:08 來源:動力節點 瀏覽1464次
HTML布局對很多初學者來說還是比較陌生的,為了讓大家能夠更了解HTML布局,下面就由動力節點java培訓機構的小編來給大家進行HTML布局教程詳解。
HTML布局元素
header | 定義文檔或節的頁眉 |
nav | 定義導航鏈接的容器 |
section | 定義文檔中的節 |
article | 定義獨立的自包含文章 |
aside | 定義內容之外的內容(比如側欄) |
footer | 定義文檔或節的頁腳 |
details | 定義額外的細節 |
summary | 定義 details 元素的標題 |
HTML 布局 - 使用表格
使用HTML
標簽是創建布局的一種簡單的方式。
HTML布局技術
創建多列布局有四種不同的方法。每種方式都有其優點和缺點:
HTML表格(不推薦)
CSS浮動屬性
CSS flexbox
CSS框架
我們要選哪一個呢?
HTML表格
元素不是設計為布局工具!
元素的目的是顯示表格數據。所以,不要使用表格進行頁面布局!它們會給你的代碼帶來麻煩。想象一下幾個月后重新設計網站會有多難。
提示:請勿使用表格進行頁面布局!
CSS框架
如果要快速創建布局,可以使用Bootstrap等框架。
CSS浮動
使用CSS浮動屬性執行整個Web布局是很常見的。浮動易于學習,您只需要記住浮動和清除屬性的工作原理。 缺點:浮動元素與文檔流相關聯,這可能會損害靈活性。你可以在CSS教程的相關章節學習。 本章開始那個例子就用了CSS浮動來實現。
CSS Flexbox
Flexbox是CSS3中的一種新布局模式。當頁面布局必須適應不同的屏幕尺寸和不同的顯示設備時,使用flexbox可確保元素的行為可預測。 缺點:在IE10及更早版本中不起作用。可以在我們的CSS教程的相關章節學習。
HTML 布局 - 有用的提示
Tip: 使用 CSS 最大的好處是,如果把 CSS 代碼存放到外部樣式表中,那么站點會更易于維護。通過編輯單一的文件,就可以改變所有頁面的布局。
Tip: 由于創建高級的布局非常耗時,使用模板是一個快速的選項。
以上就是動力節點java培訓機構的小編針對“HTML布局教程詳解”的內容進行的回答,希望對大家有所幫助,如有疑問,請在線咨詢,有專業老師隨時為你服務。
0基礎 0學費 15天面授
有基礎 直達就業
業余時間 高薪轉行
工作1~3年,加薪神器
工作3~5年,晉升架構
提交申請后,顧問老師會電話與您溝通安排學習