印刷媒體，例如一本雜志或一份報(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)容。

發(fā)表評(píng)論 共有條評(píng)論 用戶名: 密碼: 驗(yàn)證碼: 匿名發(fā)表