印刷媒體,例如一本雜志或一份報(bào)紙,相比網(wǎng)站最大的優(yōu)勢是完全靈活的安排頁面和段落布局。例如,印刷媒體已經(jīng)能夠優(yōu)雅地在多個(gè)列中填充內(nèi)容,甚至復(fù)雜到如下面屏幕截圖所示。
然而,由于Web的內(nèi)容結(jié)構(gòu),試圖在web上模仿類似的布局非常棘手。
為了使頁面布局更加靈活到如印刷媒體一般,一個(gè)新的CSS3模塊出現(xiàn)了——CSS3 regions。相比通常的在多個(gè)元素中放置內(nèi)容,此模塊允許內(nèi)容流在頁面的指定區(qū)域(regions)放置。
讓我們看看這個(gè)模塊是如何工作的。
大家在理解css region的時(shí)候,可以這么理解,我在文檔中放了一個(gè)容器,這個(gè)容器裝滿了水。但是我想把水分到a區(qū)域 b區(qū)域 c區(qū)域,我不需要人工去“分”這個(gè)水,而是讓瀏覽器去分配這些水到這些區(qū)域內(nèi)。因此水裝到哪個(gè)容器是無所謂的,分完了就不顯示了,你只需要告訴區(qū)域跟大容器,區(qū)域是放水的地方,容器是取水的地方即可。
啟用瀏覽器實(shí)驗(yàn)特性
此模塊仍處于實(shí)驗(yàn)階段,目前只在Google Chrome和ie下面支持帶前綴的屬性。如果您使用的是Google Chrome首先需要啟用實(shí)驗(yàn)特性。在地址欄輸入chrome:/ /flags/。設(shè)置”啟用實(shí)驗(yàn)WebKit特性”為enabled狀態(tài)。
基本用例
在這個(gè)例子中,我們將有兩個(gè)類型的內(nèi)容:主要內(nèi)容和次要內(nèi)容。區(qū)域1,2和4中我們填充主要內(nèi)容,而次要內(nèi)容將顯示在區(qū)域3,見下圖。
HTML
讓我們開始寫HTML結(jié)構(gòu)。
CSS3區(qū)域模塊是不受結(jié)構(gòu)限制的,因此我們可以簡單地把次要內(nèi)容部分的html添加到主要內(nèi)容外,正如我們上面提到的,我們將在主要內(nèi)容的中部顯示次要內(nèi)容。
新聞熱點(diǎn)
疑難解答
圖片精選