搜尋
首頁web前端css教學淺談DIV+CSS的優缺點

淺談DIV+CSS的優缺點

Mar 19, 2018 am 11:18 AM
優缺點

本文主要和大家淺談DIV+CSS的優缺點,具有很好的參考價值,希望對大家有幫助。一起跟著小編過來看看吧,希望能幫助大家。

DIV本身就是容器性質的,你不但可以內嵌table還可以內嵌文本和其它的HTML代碼;CSS是CascADIng style Sheets的簡稱,中文譯作“層疊樣式表單”,在主頁製作時採用CSS技術,可以有效地對頁面的佈局、字體、顏色、背景和其它效果實現更精確的控制。只要對對應的程式碼做一些簡單的修改,就可以改變同一頁的不同部分,或是所有頁數的網頁的外觀和格式。

DIV+CSS標準有以下優點:

#1、因為採用CSS佈局,不像表格佈局充滿各種各樣的屬性和數字,而且很多css檔案通常是共用的,從而大大縮減頁面程式碼,提高頁面瀏覽速度。

2、結構清晰,對搜尋引擎更加友善。更容易被搜尋引擎收錄,具備搜尋引擎SEO的先天條件,配合優秀的內容和一些SEO處理,可以獲得更好的網站排名。

3、相容性更好,符合web標準規範的發展趨勢,可以在幾乎所有的瀏覽器上都可以使用,不會出現在不同的瀏覽器中效果差距很大的情況。

4、縮短改版時間,因為網站的佈局都是透過外部的css檔案來控制,只要簡單的修改幾個CSS檔案就可以將許多網頁的風格格式同時更新,不用再一頁一頁地更新了。你可以將網站上所有的網頁風格都使用一個CSS檔案來控制,只要修改這個CSS檔案中對應的行,那麼整個網站的所有頁面都會隨之改變。

5、強大的字體控制和排版能力,CSS控製字體的能力比糟糕的FONT標籤好多了,CSS不再需要用FONT標籤或透明的1px圖片來控制標題、改變字體顏色、字體樣式等等。

6、提高易用性,使用CSS可以結構化HTML,例如:P標籤只用來控制段落,h1-h6標籤只用來控制標題,table標籤只用來表現格式化的數據等等。你可以增加更多的使用者而不需要建立獨立的版本。

7、更好的擴充性。你的設計不只用於web瀏覽器,也可以發佈在其他裝置上,例如PowerPoint等。

8、更靈活控制頁面佈局,通常頁面的下載是按照程式碼的排列順序,而表格佈局程式碼的排列代表從上向下,從左到右,無法改變。而透過CSS控制,您可以任意改變程式碼的排列順序,例如將重要的右邊內容先載入出來。

9、表現和內容相分離,乾淨利落,將設計部分剝離出來放在一個獨立樣式文件中,而網頁主要來放置您的內容,你可以減少未來網頁無效的可能。

10、更方便搜尋引擎收錄,並獲得更高的評價。用只包含結構化內容的HTML取代嵌套的標籤,主次分明,搜尋引擎將更有效地搜尋到你的內容,並可能給你一個較高的評價(ranking)。

11、Table表格佈局彈性不大,你只能遵循 table tr td 的格式。而p你可以p ul li 也可以ol li 還可以ul li......

12、Table表格佈局中,垃圾程式碼會很多,一些修飾的樣式及佈局的程式碼混合一起,很不利於直觀。而DIV 更能體現樣式和結構相分離,結構的重構性強。

13.以前一些必須透過圖片轉換實現的功能,現在只要用CSS就可以輕鬆實現,從而更快地下載頁面。


DIV+CSS有這麼多的優點,但它還有一些不好的地方:


#1、CSS網站製作的設計元素通常放在1個外部文件中,或幾個文件,有可能相當複雜,甚至比較龐大,如果CSS文件調用出現異常,那麼整個網站將變得慘不忍睹。

2、DIV+CSS儘管不是高不可及,但至少要比表格定位複雜的多,即使對於網站設計高手也很容易出現問題,更不要說初學者了。

3、雖然說DIV+CSS解決了大部分瀏覽器相容問題,但是也有在部分瀏覽器中使用出現異常,例如火狐瀏覽器,在IE中顯示正常的頁面,到了火狐瀏覽器中可能會面目全非。當然這應該是瀏覽器的問題,但可以說在目前來看,DIV+CSS還沒有實現所有瀏覽器的統一相容。

4、DIV+CSS對搜尋引擎最佳化與否,取決於網頁設計的專業程度,而不是DIV+CSS本身。 DIV+CSS網頁設計並不能保證網頁對搜尋引擎的優化,甚至不能保證一定比HTML網站有更簡潔的程式碼設計,何況搜尋引擎對於網頁的收錄和排序顯然不是以是否採用表格和CSS定位來衡量,這就是為什麼許多傳統表格佈局製作的網站在搜尋結果中的排序靠前,而許多使用CSS及web標準製作的網頁排名依然靠後的原因。因為對於搜尋引擎而言,網站架構、內容、相關網站連結等因素始終是網站優化最重要的指標。

以上是淺談DIV+CSS的優缺點的詳細內容。更多資訊請關注PHP中文網其他相關文章!

陳述
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
我們如何標記Google字體並創建Goofonts.com我們如何標記Google字體並創建Goofonts.comApr 12, 2025 pm 12:02 PM

Goofonts是由開發人員和設計師丈夫簽名的附帶項目,它們都是版式的忠實擁護者。我們一直在標記Google

永恆的Web開發文章永恆的Web開發文章Apr 12, 2025 am 11:44 AM

Pavithra Kodmad向人們詢問了他們認為是關於網絡開發的一些最永恆的文章的建議

與部分元素的交易與部分元素的交易Apr 12, 2025 am 11:39 AM

同一天發表了兩篇文章:

使用JavaScript API練習GraphQl查詢使用JavaScript API練習GraphQl查詢Apr 12, 2025 am 11:33 AM

學習如何構建GraphQL API可能具有挑戰性。但是您可以學習如何在10分鐘內使用GraphQL API!碰巧的是,我得到了完美的

組件級CMS組件級CMSApr 12, 2025 am 11:09 AM

當一個組件生活在數據查詢居住在附近的數據查詢的環境中時,視覺組件和

將類型設置在圓上...帶偏移路徑將類型設置在圓上...帶偏移路徑Apr 12, 2025 am 11:00 AM

這裡是Yuanchuan的一些合法CSS騙局。有此CSS屬性偏移路徑。曾幾何時,它被稱為Motion-Path,然後被更名。我

'恢復”在CSS中有什麼作用?'恢復”在CSS中有什麼作用?Apr 12, 2025 am 10:59 AM

Miriam Suzanne在Mozilla開發人員的視頻中解釋了該主題。

現代戀人現代戀人Apr 12, 2025 am 10:58 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中的所有內容
4 週前By尊渡假赌尊渡假赌尊渡假赌

熱工具

MinGW - Minimalist GNU for Windows

MinGW - Minimalist GNU for Windows

這個專案正在遷移到osdn.net/projects/mingw的過程中,你可以繼續在那裡關注我們。 MinGW:GNU編譯器集合(GCC)的本機Windows移植版本,可自由分發的導入函式庫和用於建置本機Windows應用程式的頭檔;包括對MSVC執行時間的擴展,以支援C99功能。 MinGW的所有軟體都可以在64位元Windows平台上運作。

WebStorm Mac版

WebStorm Mac版

好用的JavaScript開發工具

SecLists

SecLists

SecLists是最終安全測試人員的伙伴。它是一個包含各種類型清單的集合,這些清單在安全評估過程中經常使用,而且都在一個地方。 SecLists透過方便地提供安全測試人員可能需要的所有列表,幫助提高安全測試的效率和生產力。清單類型包括使用者名稱、密碼、URL、模糊測試有效載荷、敏感資料模式、Web shell等等。測試人員只需將此儲存庫拉到新的測試機上,他就可以存取所需的每種類型的清單。

Dreamweaver Mac版

Dreamweaver Mac版

視覺化網頁開發工具

Safe Exam Browser

Safe Exam Browser

Safe Exam Browser是一個安全的瀏覽器環境,安全地進行線上考試。該軟體將任何電腦變成一個安全的工作站。它控制對任何實用工具的訪問,並防止學生使用未經授權的資源。