首頁  >  文章  >  web前端學習入門:DIV+CSS對頁面佈局的優勢!

web前端學習入門:DIV+CSS對頁面佈局的優勢!

phpcn_u1339
phpcn_u1339原創
2017-04-01 14:17:512848瀏覽

目前從小的個人網站甚至大的入口網站都在用Div+CSS進行頁面佈局,網頁設計人員已經把Div+CSS頁面佈局當作業界標準。在這以前都是用table進行佈局的哦!那麼業界人士為什麼現在這麼推崇Div+CSS頁面佈局而棄用table呢?

先來看看到底什麼是Div+css?

DIV+CSS是網站標準(或稱為「WEB標準」)中常用的術語之一,通常為了說明與HTML網頁設計語言中的表格(table)定位方式的區別,因為XHTML網站設計標準中,不再使用表格定位技術,而是採用DIV+CSS的方式來實現各種樣式製作定位。
Div是html(超文本語言)中的一個元素,Div 是標籤 css是層疊樣式表(css樣式) ,Div+css 是一種網頁的佈局方法,這一種網頁佈局方法有別於傳統的table佈局,真正達到了w3c內容與表現相分離。

web前端學習入門:DIV+CSS對頁面佈局的優勢!

(web前端學習入門:DIV+CSS對頁面佈局的優勢!)

Div+CSS的標準化設計模式到底有什麼好處?

1、大幅縮減頁面程式碼,提高頁面瀏覽速度,縮減頻寬成本;

2、結構清晰,容易被搜尋引擎搜尋到,天生優化了seo

3、縮短改版時間。只要簡單的修改幾個CSS檔案就可以重新設計一個有數百頁的網站。

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

5、CSS非常容易寫。你可以像寫html程式碼一樣輕鬆地寫CSS。

6、提高易用性。使用CSS可以結構化HTML,例如:

標籤只用來控制段落,heading標籤只用來控制標題,table標籤只用來表現格式化的資料等等。你可以增加更多的使用者而不需要建立獨立的版本。

7、可以一次設計,隨處發布。你的設計不只用於web瀏覽器,也可以發佈在其他裝置上,例如PowerPoint。

8、更好的控制頁面佈局。

9、表現和內容相分離。將設計部分剝離出來放在一個獨立樣式檔案中,你可以減少未來網頁無效的可能性。

10、更方便搜尋引擎的搜尋。用只包含結構化內容的HTML取代巢狀的標籤,搜尋引擎將更有效地搜尋你的內容,並可能給你一個較高的評價(ranking)。

11、Table 版面彈性不大,只能遵循 table tr td 的格式。而Div 你可以 Div ul li 也可以 ol li 還可以 ul li ……但標準語法最好有序的寫。

12、另外如果你不是javascript的高手,你可以不必去寫ID,只用class就可以。當客戶端程式設計師寫完程序,需要調整時候,你可以利用他的ID來控制。

13、Table 中佈局中,垃圾程式碼會很多,一些修飾過的樣式和佈局的程式碼混合在一起,很不利於直覺。而Div 更能體現樣式和結構相分離,結構的重構性強。

14、幾乎在所有的瀏覽器上都可以使用。

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

16、讓頁面的字體變得更漂亮,更容易編排,讓頁面真正賞心悅目。

17、你可以輕鬆控制頁面的佈局 。

總結:Div+css既然這麼多優勢,那還幹嘛要學table?所以請忘記table吧!目前市面上都是採用DIV+CSS進行版面網頁,跟著市場上最新的科技趨勢走肯定是對的!那就感覺學習吧! (web前端學習路線:如何從零開始學習DIV+CSS

#相關文章推薦:

##web前端學習路線:

WEB前端開發快速入門

成為優秀的前端工程師需要學什麼?


#

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