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