你對(duì)CSS排版的概念是否熟悉，CSS排版是一種很新的排版理念，完全有別于傳統(tǒng)的排版習(xí)慣。它將頁(yè)面首先在整體上進(jìn)行div標(biāo)記的分塊，然后對(duì)各個(gè)塊進(jìn)行CSS定位，最后再在各個(gè)塊中添加相應(yīng)的內(nèi)容。

CSS排版

上一課中主要講解了CSS對(duì)頁(yè)面中各個(gè)元素的定位，本課在此基礎(chǔ)上，從頁(yè)面的整體排版出發(fā)，介紹CSS排版的觀念和具體方法，包括CSS排版的整體思路、兩種具體的排版結(jié)構(gòu)、電子相冊(cè)的幾種版式制作，以及與傳統(tǒng)表格排版方法的比較。

1．CSS排版觀念

CSS排版是一種很新的排版理念，完全有別于傳統(tǒng)的排版習(xí)慣。它將頁(yè)面首先在整體上進(jìn)行div標(biāo)記的分塊，然后對(duì)各個(gè)塊進(jìn)行CSS定位，最后再在各個(gè)塊中添加相應(yīng)的內(nèi)容。通過CSS排版的頁(yè)面，更新十分的容易，甚至是頁(yè)面的拓?fù)浣Y(jié)構(gòu)，都可以通過修改CSS屬性來重新定位。我們?cè)谶@里主要介紹CSS排版的整體思路，為后續(xù)課程的進(jìn)一步介紹打下基礎(chǔ)。希望大家能夠掌握以下幾個(gè)方面的內(nèi)容：

將頁(yè)面用div分塊

設(shè)計(jì)各塊的位置

用CSS定位

2．固定寬度且居中的版式

寬度固定而且居中的CSS版式是網(wǎng)絡(luò)中最常見的排版方式之一，我們?cè)谶@里利用CSS排版的方式制作這種通用的結(jié)構(gòu)，并采用兩種方法分別予以實(shí)現(xiàn)。
首先像上一節(jié)描述的一樣，將所有頁(yè)面內(nèi)容用一個(gè)的大div包裹起來，指定該div的id為container，這個(gè)id在整個(gè)頁(yè)面中是唯一的。雖然大部分瀏覽器并不限制重復(fù)id的使用，但非常不建議同一個(gè)頁(yè)面中出現(xiàn)重復(fù)id，因?yàn)橹貜?fù)id會(huì)使得javascript等腳本語言在尋找對(duì)象時(shí)發(fā)生混亂。

3．左中右版式

將頁(yè)面分割為左中右三塊也是網(wǎng)上常見的一種排版模式，我們?cè)谶@里以此結(jié)構(gòu)為例鞏固CSS排版的方法，頁(yè)面結(jié)構(gòu)如圖所示。

4．塊的背景色問題

在前面提到的頁(yè)面左中右的結(jié)構(gòu)，雖然在整體上將頁(yè)面進(jìn)行了排版，但細(xì)節(jié)處理仍然有不足之處。如果給#left、#middle、#right都設(shè)置背景顏色就會(huì)發(fā)現(xiàn)，僅僅按照上例中的設(shè)置，#left、#right的背景都沒有延伸到頁(yè)面的底端，而是僅僅覆蓋了內(nèi)容的部分。

這種背景顏色的問題在CSS排版中經(jīng)常會(huì)遇到，我們?cè)谶@里給出通用的解決辦法，首先按照上節(jié)中最后一段代碼的方式將中間三塊放入一個(gè)父塊#mainbox中，然后同樣把頁(yè)面中所有的塊放入到一個(gè)大的父塊#container中。

5．排版實(shí)例：電子相冊(cè)

當(dāng)你出去旅游時(shí)拍的很多照片，希望放在網(wǎng)上與朋友分享時(shí)；當(dāng)新聞工作者、攝影家拍了很多相片希望放到網(wǎng)上出售時(shí)，電子相冊(cè)都必不可少。我們?cè)谶@里通過CSS對(duì)電子相冊(cè)的排版，并且分幻燈片、詳細(xì)信息兩種模式，進(jìn)一步介紹CSS排版的方法。其中幻燈片模式的最終效果如左圖所示，詳細(xì)信息模式的最終效果如右圖所示。

6．DIV排版與傳統(tǒng)的表格方式排版的分析

事實(shí)上，現(xiàn)在仍存在大量的使用表格進(jìn)行布局的頁(yè)面，我們?cè)跁泻鸵曨l課程中，也會(huì)分析到二者各自的優(yōu)點(diǎn)和缺點(diǎn)，這樣大家就可以根據(jù)需要來選擇使用那種技術(shù)更恰當(dāng)了。

 【編輯推薦】

1. 詳解CSS定位屬性Position用法
2. 暢談DIV排版和table排版的區(qū)別
3. 14大CSS工具提高網(wǎng)頁(yè)設(shè)計(jì)效率
4. 實(shí)現(xiàn)DIV圖片居中方法揭秘
5. 鼠標(biāo)經(jīng)過時(shí)改變DIV背景顏色的三種途徑