超級簡單的DIV+CSS網頁布局

　　這篇文章演示在一個頁面上有效的使用div元素來構建網站，而不是使用table元素。因為div元素有很多優勢，所以大部分客戶開發網站要求設計開發div元素，而不是table元素。上面的代碼是是為了給初學者學習使用div元素開發網站的。

　　下面解釋為什么使用div元素而不是table元素

　　table元素的優點：大多是設計開發者使用table是為了統一的外觀。table也非常容易維護。另一個表的好處是，它是與大多數瀏覽器兼容。

　　table元素的缺點： 所有的這些都需要消耗成本：嵌套太多的table會增加頁面的大小和下載時間。太多的table元素會使網頁重要的內容占有比例下降，導致搜索蜘蛛把沒用的內容添加到搜索引擎中。

　　DIV元素的優點：div加css，我們可以實現同樣的基于table的頁面結構，而且可以減少頁面上的元素數目，這樣使頁面加載更快。這也使得更多的網頁與搜索引擎匹配。

　　DIV 元素的缺點：主要的缺點是，并非所有的CSS元素與所有的瀏覽器兼容。正因為如此，我們必須寫一些自定義CSS來解決問題。

　　我已經創建了一個簡單的應用程序，展示了如何輕松地就可以創建僅僅只有div元素的網頁。

　　下面的圖展示了div元素的布局

　　這里是我創建的對頁面布局css樣式表類的列表，讓我們看看更多的細節。

　　divHeaderTable: 設計html頁面的頭部，應用此樣式的div作用相當于headertable 。

　　divHeaderRow:應用此樣式的div作用相當于table的header row 。由于頭部的圖像固定為105，所以row中height元素值為105px。

　　divHeaderColumn:應用此樣式的div作用相當于table的header column 。值為99%的頭部元素被劃分為3個這樣的元素部分。

　　divTable: 應用此類的div作用相當于html文檔容器中的table 。

　　divRow: 應用此類的div作用相當于html文檔容器中的row。

　　divColumn: 應用此樣式的div 相當于html文檔容器中的Column。容器里面將有四個width為24%的row。

生活不易，碼農辛苦
如果您覺得本網站對您的學習有所幫助,可以手機掃描二維碼進行捐贈