深入剖析CSS排版思想及其用法
你對CSS排版的概念是否熟悉，CSS排版是一種很新的排版理念，完全有別于傳統(tǒng)的排版習(xí)慣。它將頁面首先在整體上進(jìn)行div標(biāo)記的分塊，然后對各個塊進(jìn)行CSS定位，最后再在各個塊中添加相應(yīng)的內(nèi)容。
CSS排版
上一課中主要講解了CSS對頁面中各個元素的定位，本課在此基礎(chǔ)上，從頁面的整體排版出發(fā)，介紹CSS排版的觀念和具體方法，包括CSS排版的整體思路、兩種具體的排版結(jié)構(gòu)、電子相冊的幾種版式制作，以及與傳統(tǒng)表格排版方法的比較。
1．CSS排版觀念
CSS排版是一種很新的排版理念，完全有別于傳統(tǒng)的排版習(xí)慣。它將頁面首先在整體上進(jìn)行div標(biāo)記的分塊，然后對各個塊進(jìn)行CSS定位，最后再在各個塊中添加相應(yīng)的內(nèi)容。通過CSS排版的頁面，更新十分的容易，甚至是頁面的拓?fù)浣Y(jié)構(gòu)，都可以通過修改CSS屬性來重新定位。我們在這里主要介紹CSS排版的整體思路，為后續(xù)課程的進(jìn)一步介紹打下基礎(chǔ)。希望大家能夠掌握以下幾個方面的內(nèi)容：
將頁面用div分塊
設(shè)計各塊的位置
用CSS定位
2．固定寬度且居中的版式
寬度固定而且居中的CSS版式是網(wǎng)絡(luò)中最常見的排版方式之一，我們在這里利用CSS排版的方式制作這種通用的結(jié)構(gòu)，并采用兩種方法分別予以實現(xiàn)。
首先像上一節(jié)描述的一樣，將所有頁面內(nèi)容用一個的大div包裹起來，指定該div的id為container，這個id在整個頁面中是唯一的。雖然大部分瀏覽器并不限制重復(fù)id的使用，但非常不建議同一個頁面中出現(xiàn)重復(fù)id，因為重復(fù)id會使得javascript等腳本語言在尋找對象時發(fā)生混亂。
3．左中右版式
將頁面分割為左中右三塊也是網(wǎng)上常見的一種排版模式，我們在這里以此結(jié)構(gòu)為例鞏固CSS排版的方法，頁面結(jié)構(gòu)如圖所示。
4．塊的背景色問題
在前面提到的頁面左中右的結(jié)構(gòu)，雖然在整體上將頁面進(jìn)行了排版，但細(xì)節(jié)處理仍然有不足之處。如果給#left、#middle、#right都設(shè)置背景顏色就會發(fā)現(xiàn)，僅僅按照上例中的設(shè)置，#left、#right的背景都沒有延伸到頁面的底端，而是僅僅覆蓋了內(nèi)容的部分。
這種背景顏色的問題在CSS排版中經(jīng)常會遇到，我們在這里給出通用的解決辦法，首先按照上節(jié)中最后一段代碼的方式將中間三塊放入一個父塊#mainbox中，然后同樣把頁面中所有的塊放入到一個大的父塊#container中。
5．排版實例：電子相冊
當(dāng)你出去旅游時拍的很多照片，希望放在網(wǎng)上與朋友分享時；當(dāng)新聞工作者、攝影家拍了很多相片希望放到網(wǎng)上出售時，電子相冊都必不可少。我們在這里通過CSS對電子相冊的排版，并且分幻燈片、詳細(xì)信息兩種模式，進(jìn)一步介紹CSS排版的方法。其中幻燈片模式的最終效果如左圖所示，詳細(xì)信息模式的最終效果如右圖所示。
6．DIV排版與傳統(tǒng)的表格方式排版的分析
事實上，現(xiàn)在仍存在大量的使用表格進(jìn)行布局的頁面，我們在書中和視頻課程中，也會分析到二者各自的優(yōu)點和缺點，這樣大家就可以根據(jù)需要來選擇使用那種技術(shù)更恰當(dāng)了。
【編輯推薦】
