搜尋
首頁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
' CSS4”更新' CSS4”更新Apr 11, 2025 pm 12:05 PM

自從我第一次介紹了CSS4面中的事情以來,就已經進行了更多的討論。我將在這裡從其他人那裡匯集我最喜歡的想法。有

三種代碼三種代碼Apr 11, 2025 pm 12:02 PM

每次啟動一個新項目時,我都會將我正在查看的代碼分為三種類型,或者如果您願意的話。我認為這些類型可以應用於

https很容易!https很容易!Apr 11, 2025 am 11:51 AM

我對公開哀悼HTTPS的複雜性感到內gui。過去,我從第三方供應商那裡購買了SSL證書,並且遇到了麻煩

HTML數據屬性指南HTML數據屬性指南Apr 11, 2025 am 11:50 AM

您想了解的有關HTML,CSS和JavaScript中數據屬性的所有信息。

了解JavaScript中的不變性了解JavaScript中的不變性Apr 11, 2025 am 11:47 AM

如果您以前從未在JavaScript中使用不變性,則可能會發現很容易將其與為新值或重新分配分配變量的混淆。

具有現代CSS功能的定製樣式表單輸入具有現代CSS功能的定製樣式表單輸入Apr 11, 2025 am 11:45 AM

如今,可以在語義上且易於訪問的同時構建自定義的複選框,無線電按鈕和切換開關。我們甚至不需要

腳註字符腳註字符Apr 11, 2025 am 11:34 AM

有特殊的超級數字字符有時非常適合腳註。他們在這裡:

如何使用HTML,CSS和JavaScript創建動畫倒計時計時器如何使用HTML,CSS和JavaScript創建動畫倒計時計時器Apr 11, 2025 am 11:29 AM

您是否曾經在項目上需要一個倒計時計時器?對於這樣的東西,可以自然訪問插件,但實際上更多

See all articles

熱AI工具

Undresser.AI Undress

Undresser.AI Undress

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

AI Clothes Remover

AI Clothes Remover

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

Undress AI Tool

Undress AI Tool

免費脫衣圖片

Clothoff.io

Clothoff.io

AI脫衣器

AI Hentai Generator

AI Hentai Generator

免費產生 AI 無盡。

熱門文章

R.E.P.O.能量晶體解釋及其做什麼(黃色晶體)
3 週前By尊渡假赌尊渡假赌尊渡假赌
R.E.P.O.最佳圖形設置
3 週前By尊渡假赌尊渡假赌尊渡假赌
R.E.P.O.如果您聽不到任何人,如何修復音頻
3 週前By尊渡假赌尊渡假赌尊渡假赌
WWE 2K25:如何解鎖Myrise中的所有內容
3 週前By尊渡假赌尊渡假赌尊渡假赌

熱工具

WebStorm Mac版

WebStorm Mac版

好用的JavaScript開發工具

Dreamweaver Mac版

Dreamweaver Mac版

視覺化網頁開發工具

PhpStorm Mac 版本

PhpStorm Mac 版本

最新(2018.2.1 )專業的PHP整合開發工具

MantisBT

MantisBT

Mantis是一個易於部署的基於Web的缺陷追蹤工具,用於幫助產品缺陷追蹤。它需要PHP、MySQL和一個Web伺服器。請查看我們的演示和託管服務。

禪工作室 13.0.1

禪工作室 13.0.1

強大的PHP整合開發環境