web前端設(shè)計(jì)表格布局和div+CSS布局

2021-02-05    分類： 網(wǎng)站建設(shè)

傳統(tǒng)表格布局

傳統(tǒng)表格布局利用了HTML中的表格元素設(shè)置參數(shù)以達(dá)到無(wú)邊框特性，將網(wǎng)頁(yè)中的各個(gè)元素按版式劃分放入表格的各單元格中，從而實(shí)現(xiàn)復(fù)雜的排版組合。

特點(diǎn)

現(xiàn)在依然有網(wǎng)站在使用表格布局，表格布局使用方法簡(jiǎn)單，制作只要將內(nèi)容按照行和列拆分，用表格組裝起來(lái)即可實(shí)現(xiàn)設(shè)計(jì)版面布局。


如今我們對(duì)網(wǎng)站外觀要求和體驗(yàn)的不斷提高，開發(fā)人員用各種圖片來(lái)裝飾網(wǎng)頁(yè)。由于一些大圖會(huì)致使下載速度緩慢，所以一般我們將大圖切分成若干個(gè)小圖，使網(wǎng)頁(yè)加載速度加快。下圖所示為使用表格布局的頁(yè)面和該頁(yè)面的部分HTML代碼。

網(wǎng)頁(yè)效果


div+CSS

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

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

組成

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


一個(gè)盒子在頁(yè)面上由“內(nèi)容+內(nèi)邊距+外邊距+邊框”組成的，可以通過(guò)設(shè)定盒子的border、padding和margin來(lái)實(shí)現(xiàn)各種各樣的排版效果。也不是所有用

定義的網(wǎng)頁(yè)元素才是盒子，所有的網(wǎng)頁(yè)元素都可以看做是盒子。網(wǎng)頁(yè)上的表格、圖片、文字等，從盒子模型的角度就是大大小小的盒子排列或嵌套在一起的。

總結(jié)

網(wǎng)頁(yè)改版維護(hù)的維護(hù)

表格布局：復(fù)雜的表格設(shè)計(jì)使得設(shè)計(jì)不易，修改更復(fù)雜，最后生成的網(wǎng)頁(yè)代碼有許多冗余，還有許多沒(méi)有任何意義的元素，文件量龐大，下載慢，解析速度也慢，維護(hù)和更新困難。

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

保持視覺(jué)的一致性：

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

頁(yè)面載入得更快：

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

搜索引擎友程度高：

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

名稱欄目：web前端設(shè)計(jì)表格布局和div+CSS布局
網(wǎng)頁(yè)路徑：http://muchs.cn/news/99211.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供網(wǎng)站排名、微信公眾號(hào)、品牌網(wǎng)站制作、網(wǎng)站收錄、做網(wǎng)站、營(yíng)銷型網(wǎng)站建設(shè)

廣告

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