印刷媒體，例如一本雜志或一份報紙，相比網站最大的優勢是完全靈活的安排頁面和段落布局。例如,印刷媒體已經能夠優雅地在多個列中填充內容,甚至復雜到如下面屏幕截圖所示。

然而,由于Web的內容結構,試圖在web上模仿類似的布局非常棘手。
為了使頁面布局更加靈活到如印刷媒體一般,一個新的CSS3模塊出現了——CSS3 regions。相比通常的在多個元素中放置內容，此模塊允許內容流在頁面的指定區域(regions)放置。

讓我們看看這個模塊是如何工作的。

大家在理解css region的時候，可以這么理解，我在文檔中放了一個容器，這個容器裝滿了水。但是我想把水分到a區域 b區域 c區域，我不需要人工去“分”這個水，而是讓瀏覽器去分配這些水到這些區域內。因此水裝到哪個容器是無所謂的，分完了就不顯示了，你只需要告訴區域跟大容器，區域是放水的地方，容器是取水的地方即可。
啟用瀏覽器實驗特性

此模塊仍處于實驗階段,目前只在Google Chrome和ie下面支持帶前綴的屬性。如果您使用的是Google Chrome首先需要啟用實驗特性。在地址欄輸入chrome:/ /flags/。設置”啟用實驗WebKit特性”為enabled狀態。

基本用例

在這個例子中,我們將有兩個類型的內容:主要內容和次要內容。區域1,2和4中我們填充主要內容,而次要內容將顯示在區域3,見下圖。

HTML

讓我們開始寫HTML結構。

CSS3區域模塊是不受結構限制的,因此我們可以簡單地把次要內容部分的html添加到主要內容外,正如我們上面提到的,我們將在主要內容的中部顯示次要內容。

發表評論 共有條評論 用戶名: 密碼: 驗證碼: 匿名發表