DIV+CSS之布局一行三列頁面實(shí)證分析

聞立鷗

摘要：當(dāng)前DIV+CSS技術(shù)已經(jīng)成為制作網(wǎng)頁的主流技術(shù)，內(nèi)容與表現(xiàn)的分離不僅大大提高了頁面的瀏覽速度，而且提高了網(wǎng)站的維護(hù)效率。本文通過案例的拆分，將DIV+CSS制作網(wǎng)頁的流程與大家分享。

關(guān)鍵詞：DIV；CSS；三列頁面

中圖分類號(hào)：TP393 文獻(xiàn)標(biāo)志碼：A 文章編號(hào)：1674-9324（2014）33-0132-02

一、為什么要使用DIV+CSS技術(shù)

在以前我們制作網(wǎng)站時(shí)，總是習(xí)慣于先考慮外觀、顏色、字體及布局等所有表現(xiàn)在頁面上的內(nèi)容，然后采用傳統(tǒng)的表格（Table）布局方式，為了實(shí)現(xiàn)網(wǎng)頁所需的外觀效果，層層嵌套表格，不僅制作網(wǎng)頁費(fèi)時(shí)費(fèi)力，修改更新頁面工作量巨大，同時(shí)產(chǎn)生大量的代碼冗余，網(wǎng)頁加載速度緩慢。而一個(gè)由div+css布局且結(jié)構(gòu)良好的頁面可以通過css定義成任何外觀，在任何網(wǎng)絡(luò)設(shè)備（包括手機(jī)、PDA和計(jì)算機(jī)）上以任何外觀表現(xiàn)出來，而且用div+css布局構(gòu)建的網(wǎng)頁來簡化代碼，加快顯示速度。因此要轉(zhuǎn)變觀念，采用層（DIV）布局，并且使用層疊樣式表（CSS）來實(shí)現(xiàn)頁面的外觀，給網(wǎng)站瀏覽者更好的體驗(yàn)。

二、DIV+CSS技術(shù)簡介

DIV+CSS的布局方法簡單來說就是使用div標(biāo)簽作為容器，使用CSS技術(shù)來排布div標(biāo)簽的布局方法。使用DIV+CSS布局，div標(biāo)簽就是布局中所用到的容器。頁面上的每個(gè)容器都占有一定的位置，有一定的大小。每個(gè)容器都會(huì)影響其他容器的排布，它們相互作用，而形成一個(gè)頁面的布局。

三、DIV+CSS技術(shù)制作個(gè)人一行三列頁面的流程解析

本案例頁面布局采用的是一種典型的一行三列的形式，很常見且很實(shí)用。使用DIV+CSS技術(shù)方法進(jìn)行制作，可先將頁面分為左、中、右三個(gè)部分，分別用三個(gè)盒子放置相應(yīng)的欄目，三個(gè)盒子分別命名為leftbox、midbox、rightbox。其中在midbox有三塊垂直排列的文章列表，分別用articleone、articletwo、articlethree放置；rightbox中放置頁面的導(dǎo)航，用名稱為nav的盒子放置。盒模型的結(jié)構(gòu)圖如下：

1.網(wǎng)頁雙背景效果的代碼實(shí)現(xiàn)。

2.利用DIV構(gòu)建整體網(wǎng)頁的結(jié)構(gòu)。