web前端設計表格布局和div+CSS布局

div+CSS

CSS布局是網頁html通過div標簽+css樣式表代碼開發(fā)制作的（html）網頁的統(tǒng)稱。

所有都元素都被看做是一個個盒子，它們占據一定空間，在其中有著特定的內容。我們可以通過調整盒子的邊框和間距等參數(shù)來調節(jié)盒子的位置以及大小。頁面是由大大小小許多盒子組成的，這些盒子互相之間彼此影響，因此，我們既需要理解每個盒子內部的機構，也需要理解盒子直接的關系以及互相的影響。

組成

盒子模型由content（內容）、border（邊框）、padding（內邊距）、margin（外邊距）共4個部分組成。如下圖：

一個盒子在頁面上由“內容+內邊距+外邊距+邊框”組成的，可以通過設定盒子的border、padding和margin來實現(xiàn)各種各樣的排版效果。也不是所有用<div>定義的網頁元素才是盒子，所有的網頁元素都可以看做是盒子。網頁上的表格、圖片、文字等，從盒子模型的角度就是大大小小的盒子排列或嵌套在一起的。

總結

網頁改版維護的維護

表格布局：復雜的表格設計使得設計不易，修改更復雜，最后生成的網頁代碼有許多冗余，還有許多沒有任何意義的元素，文件量龐大，下載慢，解析速度也慢，維護和更新困難。

Div+CSS：可以把要展示的內容與其表現(xiàn)樣式分開，對CSS文件進行修改，其他HTML文件中自動進行套用，不必在每個HTML文件中重復設置，減少設計者更多負擔，修改頁面更省時。

保持視覺的一致性：

DIV+CSS技術，方便統(tǒng)一網頁風格，避免了不同區(qū)域或不同頁面體現(xiàn)出的效果偏差。

頁面載入得更快：

大部分頁面代碼寫在了CSS當中，使頁面體積容量更小。比表格嵌套的方式，DIV+CSS將頁面獨立成更多區(qū)域，打開頁面時，逐層加載，而不像表格嵌套那樣整個頁面圈在一個大表格里，由此頁面加載速度更加極速。

搜索引擎友程度高：

用表格進行網頁布局的代碼較多，搜索引擎要把多的代碼去掉。而使用DIV+CSS布局設計網頁，所有樣式都在CSS里，正文代碼得到極大的精簡，也減少了HTML代碼，正文就突出了，搜索程序能在更短的時間內爬完整個頁面，搜索程序執(zhí)行效率得到了提升。

網頁標題：web前端設計表格布局和div+CSS布局
標題路徑：http://www.muchs.cn/news11/99211.html

成都網站建設公司_創(chuàng)新互聯(lián)，為您提供云服務器、標簽優(yōu)化、電子商務、網站內鏈、品牌網站設計、小程序開發(fā)

廣告

聲明：本網站發(fā)布的內容（圖片、視頻和文字）以用戶投稿、用戶轉載內容為主，如果涉及侵權請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內容未經允許不得轉載，或轉載時需注明來源： 創(chuàng)新互聯(lián)