建站
咨詢(xún)
售后
建站咨詢(xún)
新聞中心
你對(duì)CSS排版的概念是否熟悉，CSS排版是一種很新的排版理念，完全有別于傳統(tǒng)的排版習(xí)慣。它將頁(yè)面首先在整體上進(jìn)行div標(biāo)記的分塊，然后對(duì)各個(gè)塊進(jìn)行CSS定位，最后再在各個(gè)塊中添加相應(yīng)的內(nèi)容。
網(wǎng)站的建設(shè)成都創(chuàng)新互聯(lián)專(zhuān)注網(wǎng)站定制,經(jīng)驗(yàn)豐富,不做模板,主營(yíng)網(wǎng)站定制開(kāi)發(fā).小程序定制開(kāi)發(fā),H5頁(yè)面制作!給你煥然一新的設(shè)計(jì)體驗(yàn)!已為成都火鍋店設(shè)計(jì)等企業(yè)提供專(zhuān)業(yè)服務(wù)。
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)容。通過(guò)CSS排版的頁(yè)面，更新十分的容易，甚至是頁(yè)面的拓?fù)浣Y(jié)構(gòu)，都可以通過(guò)修改CSS屬性來(lái)重新定位。我們?cè)谶@里主要介紹CSS排版的整體思路，為后續(xù)課程的進(jìn)一步介紹打下基礎(chǔ)。希望大家能夠掌握以下幾個(gè)方面的內(nèi)容：
將頁(yè)面用div分塊
設(shè)計(jì)各塊的位置
用CSS定位
2．固定寬度且居中的版式
寬度固定而且居中的CSS版式是網(wǎng)絡(luò)中最常見(jiàn)的排版方式之一，我們?cè)谶@里利用CSS排版的方式制作這種通用的結(jié)構(gòu)，并采用兩種方法分別予以實(shí)現(xiàn)。
首先像上一節(jié)描述的一樣，將所有頁(yè)面內(nèi)容用一個(gè)的大div包裹起來(lái)，指定該div的id為container，這個(gè)id在整個(gè)頁(yè)面中是唯一的。雖然大部分瀏覽器并不限制重復(fù)id的使用，但非常不建議同一個(gè)頁(yè)面中出現(xiàn)重復(fù)id，因?yàn)橹貜?fù)id會(huì)使得javascript等腳本語(yǔ)言在尋找對(duì)象時(shí)發(fā)生混亂。
3．左中右版式
將頁(yè)面分割為左中右三塊也是網(wǎng)上常見(jiàn)的一種排版模式，我們?cè)谶@里以此結(jié)構(gòu)為例鞏固CSS排版的方法，頁(yè)面結(jié)構(gòu)如圖所示。
4．塊的背景色問(wèn)題
在前面提到的頁(yè)面左中右的結(jié)構(gòu)，雖然在整體上將頁(yè)面進(jìn)行了排版，但細(xì)節(jié)處理仍然有不足之處。如果給#left、#middle、#right都設(shè)置背景顏色就會(huì)發(fā)現(xiàn)，僅僅按照上例中的設(shè)置，#left、#right的背景都沒(méi)有延伸到頁(yè)面的底端，而是僅僅覆蓋了內(nèi)容的部分。
這種背景顏色的問(wèn)題在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è)谶@里通過(guò)CSS對(duì)電子相冊(cè)的排版，并且分幻燈片、詳細(xì)信息兩種模式，進(jìn)一步介紹CSS排版的方法。其中幻燈片模式的最終效果如左圖所示，詳細(xì)信息模式的最終效果如右圖所示。
6．DIV排版與傳統(tǒng)的表格方式排版的分析
事實(shí)上，現(xiàn)在仍存在大量的使用表格進(jìn)行布局的頁(yè)面，我們?cè)跁?shū)中和視頻課程中，也會(huì)分析到二者各自的優(yōu)點(diǎn)和缺點(diǎn)，這樣大家就可以根據(jù)需要來(lái)選擇使用那種技術(shù)更恰當(dāng)了。
【編輯推薦】
- 詳解CSS定位屬性Position用法
- 暢談DIV排版和table排版的區(qū)別
- 14大CSS工具提高網(wǎng)頁(yè)設(shè)計(jì)效率
- 實(shí)現(xiàn)DIV圖片居中方法揭秘
- 鼠標(biāo)經(jīng)過(guò)時(shí)改變DIV背景顏色的三種途徑
當(dāng)前標(biāo)題：深入剖析CSS排版思想及其用法
瀏覽路徑：http://m.5511xx.com/article/cdejshh.html
