首頁 web前端 css教學 為什麼用div css佈局

為什麼用div css佈局

May 28, 2019 am 10:38 AM
css

為什麼用div css佈局?

剛剛接觸前端,一直覺得table佈局在程式碼上看起來比div css更整潔,div css佈局的頁面,一堆的< ;div>

...
看起來都讓人犯密集恐懼症,那麼為什麼現在的主流網站還都樂此不疲呢?為什麼div css反而成了一種主流佈局方式呢?

透過分析DIV CSS的優缺點之後就能明白為什麼使用DIV CSS佈局了。

為什麼用div css佈局

DIV CSS的優點

1、符合W3C標準。這保證您的網站不會因為將來網路應用程式的升級而被淘汰。

2、對瀏覽者和瀏覽器更具親和力。由於CSS富含豐富的樣式,使頁面更加靈活,它可以根據不同的瀏覽器,而達到顯示效果的統一和不變形。這樣就支援瀏覽器的向後相容,也就是無論未來的瀏覽器大戰,勝利的是什麼,您的網站都能很好的兼容。

3、讓頁面載入得更快。頁面體積變小,瀏覽速度變快,由於將大部分頁​​面程式碼寫在了CSS當中,使得頁面體積容量變得更小。相對於表單嵌套的方式,DIV CSS將頁面獨立成更多的區域,在開啟頁面的時候,逐層載入。而不像表格嵌套那樣將整個頁面圈在一個大表格裡,使得載入速度很慢。

4、維持視覺的一致性。以往表格嵌套的製作方法,會使得頁面與頁面,或區域與區域之間的顯示效果會有偏差。而使用DIV CSS的製作方法,將所有頁面,或所有區域統一用CSS檔案控制,就避免了不同區域或不同頁面體現出的效果偏差。

5、修改設計時更有效率。由於使用了DIV CSS製作方法,使內容和結構分離,在修改頁面的時候更容易省時。根據區域內容標記,到CSS裡找到對應的ID,使得修改頁面的時候更加方便,也不會破壞頁面其他部分的佈局樣式,在團隊開發中更容易分工合作而減少相互關聯性。

6、搜尋引擎更友善。相對與傳統的table,

採用DIV CSS技術的網頁,由於將大部分的HTML程式碼和內容樣式寫入了CSS檔案中,這就使得網頁中程式碼更加簡潔,正文部分更為突出明顯,便於被搜尋引擎採集收錄。

CSS+DIV網站設計的缺陷

儘管DIV CSS有一定的優勢,不過現階段CSS DIV網站建置存在的問題也比較明顯,主要表現在:

1、對於CSS的高度依賴使得網頁設計變得比較複雜。相對於HTML4.0中的表格佈局(table),CSS DIV儘管不是高不可及,但至少要比表格定位複雜的多,即使對於網站設計高手也很容易出現問題,更不要說初學者了,這在一定程度上影響了XHTML網站設計語言的普及應用。

2、CSS檔案異常將影響整個網站的正常瀏覽。 CSS網站製作的設計元素通常放在一個或幾個外部檔案中,這些檔案有可能相當複雜,甚至比較龐大,如果CSS檔案呼叫出現異常,那麼整個網站將變得慘不忍睹。

3、對於CSS網站設計的瀏覽器相容性問題比較突出。雖然搜尋說DIV CSS解決了大部分瀏覽器相容問題,但也有在部分瀏覽器中使用出現異常,CSS DIV還有待各個瀏覽器廠商的進一步支援。

4、CSS DIV對搜尋引擎優化與否取決於網頁設計的專業程度而不是CSS DIV本身。 CSS DIV網頁設計不能保證網頁對搜尋引擎的最佳化,甚至不能保證一定比HTML網站有更簡潔的程式碼設計。因為對於搜尋引擎而言,網站架構、內容、相關網站連結等因素始終是網站優化最重要的指標。

如何更有效、更合理的運用WEB2.0設計標準,這需要很長時間的學習和鍛鍊。而如何將DIV CSS運用的更好,需要透過不斷的實踐和體檢,累積豐富的設計經驗,才能很好的掌握這門技術。

以上是為什麼用div css佈局的詳細內容。更多資訊請關注PHP中文網其他相關文章!

本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn

熱AI工具

Undresser.AI Undress

Undresser.AI Undress

人工智慧驅動的應用程序,用於創建逼真的裸體照片

AI Clothes Remover

AI Clothes Remover

用於從照片中去除衣服的線上人工智慧工具。

Undress AI Tool

Undress AI Tool

免費脫衣圖片

Clothoff.io

Clothoff.io

AI脫衣器

Video Face Swap

Video Face Swap

使用我們完全免費的人工智慧換臉工具,輕鬆在任何影片中換臉!

熱工具

記事本++7.3.1

記事本++7.3.1

好用且免費的程式碼編輯器

SublimeText3漢化版

SublimeText3漢化版

中文版,非常好用

禪工作室 13.0.1

禪工作室 13.0.1

強大的PHP整合開發環境

Dreamweaver CS6

Dreamweaver CS6

視覺化網頁開發工具

SublimeText3 Mac版

SublimeText3 Mac版

神級程式碼編輯軟體(SublimeText3)

vue中怎麼用bootstrap vue中怎麼用bootstrap Apr 07, 2025 pm 11:33 PM

在 Vue.js 中使用 Bootstrap 分為五個步驟:安裝 Bootstrap。在 main.js 中導入 Bootstrap。直接在模板中使用 Bootstrap 組件。可選:自定義樣式。可選:使用插件。

HTML,CSS和JavaScript的角色:核心職責 HTML,CSS和JavaScript的角色:核心職責 Apr 08, 2025 pm 07:05 PM

HTML定義網頁結構,CSS負責樣式和佈局,JavaScript賦予動態交互。三者在網頁開發中各司其職,共同構建豐富多彩的網站。

了解HTML,CSS和JavaScript:初學者指南 了解HTML,CSS和JavaScript:初學者指南 Apr 12, 2025 am 12:02 AM

WebDevelovermentReliesonHtml,CSS和JavaScript:1)HTMLStructuresContent,2)CSSStyleSIT和3)JavaScriptAddSstractivity,形成thebasisofmodernWebemodernWebExexperiences。

bootstrap怎麼寫分割線 bootstrap怎麼寫分割線 Apr 07, 2025 pm 03:12 PM

創建 Bootstrap 分割線有兩種方法:使用 標籤,可創建水平分割線。使用 CSS border 屬性,可創建自定義樣式的分割線。

bootstrap怎麼設置框架 bootstrap怎麼設置框架 Apr 07, 2025 pm 03:27 PM

要設置 Bootstrap 框架,需要按照以下步驟:1. 通過 CDN 引用 Bootstrap 文件;2. 下載文件並將其託管在自己的服務器上;3. 在 HTML 中包含 Bootstrap 文件;4. 根據需要編譯 Sass/Less;5. 導入定製文件(可選)。設置完成後,即可使用 Bootstrap 的網格系統、組件和样式創建響應式網站和應用程序。

bootstrap怎麼插入圖片 bootstrap怎麼插入圖片 Apr 07, 2025 pm 03:30 PM

在 Bootstrap 中插入圖片有以下幾種方法:直接插入圖片,使用 HTML 的 img 標籤。使用 Bootstrap 圖像組件,可以提供響應式圖片和更多樣式。設置圖片大小,使用 img-fluid 類可以使圖片自適應。設置邊框,使用 img-bordered 類。設置圓角,使用 img-rounded 類。設置陰影,使用 shadow 類。調整圖片大小和位置,使用 CSS 樣式。使用背景圖片,使用 background-image CSS 屬性。

bootstrap按鈕怎麼用 bootstrap按鈕怎麼用 Apr 07, 2025 pm 03:09 PM

如何使用 Bootstrap 按鈕?引入 Bootstrap CSS創建按鈕元素並添加 Bootstrap 按鈕類添加按鈕文本

bootstrap怎麼調整大小 bootstrap怎麼調整大小 Apr 07, 2025 pm 03:18 PM

要調整 Bootstrap 中元素大小,可以使用尺寸類,具體包括:調整寬度:.col-、.w-、.mw-調整高度:.h-、.min-h-、.max-h-

See all articles