欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

CSS3區(qū)域模塊region相關(guān)編寫示例

W3CPlus   發(fā)布時間：2015-08-28 18:11:26   作者：jtyjty99999的博客   我要評論
這篇文章主要介紹了CSS3區(qū)域模塊region相關(guān)編寫示例,對頁面排版相關(guān)部分的工作非常有幫助意義,需要的朋友可以參考下

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

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

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

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

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

基本用例

在這個例子中,我們將有兩個類型的內(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)容。

XML/HTML Code復(fù)制內(nèi)容到剪貼板
  1. <header class="cf">  
  2.     <h1><span>Lorem ipsum dolor sit amet,</span> consectetur adipisicing elit, sed do eiusmod　tempor incididunt ut.</h1>  
  3.     <h2>labore et dolore magna aliqua</h2>  
  4. </header>  
  5.   
  6. <article class="cf">  
  7.     <p>Lorem ipsum dolor sit amet, consectetur ...</p>  
  8. </article>  
  9.   
  10. <aside>  
  11.     <p><img src="img/stat.jpg" width="500" height="300"></p>  
  12.     <p>Lorem ipsum dolor sit amet, consectetur ...</p>  
  13. </aside>  

然后,我們需要添加區(qū)域標(biāo)記來標(biāo)記內(nèi)容流向什么區(qū)域。添加標(biāo)記的區(qū)域是否高于或低于實際內(nèi)容是沒有什么影響的。

這里的意思是 假設(shè)有個div里面裝了很多文字，你要把這些文字流向另一個div中，這個div放到哪都是無所謂的。

XML/HTML Code復(fù)制內(nèi)容到剪貼板
  1. <div class="regions cf">   
  2.     <div id="region-1" class="region cf"></div>   
  3.     <div id="region-2" class="region"></div>   
  4.     <div id="region-3" class="region"></div>   
  5.     <div id="region-4" class="region cf"></div>   
  6. </div>   

CSS

在樣式表中,我們指定區(qū)域的寬度和高度。高度是必須的，因為高度指定內(nèi)容斷點,否則內(nèi)容不會流向其他區(qū)域。

這里的意思是高度規(guī)定這個容器能容納多少內(nèi)容，超過了則會流向其他容器。——@99

CSS Code復(fù)制內(nèi)容到剪貼板
  1. .demo-wrapper #region-1,   
  2. .demo-wrapper #region-4  {   
  3.     width: 100%;   
  4.     height: 250px;   
  5. }   
  6. .demo-wrapper #region-4 {   
  7.     height: 400px;   
  8. }   
  9. .demo-wrapper #region-2,   
  10. .demo-wrapper #region-3 {   
  11.     width: 50%;   
  12.     height: 700px;   
  13.     margin-bottom: 25px;   
  14. }  

為了在區(qū)域內(nèi)添加內(nèi)容,我們使用新的CSS屬性flow-into和flow-from。這些屬性建立了內(nèi)容和區(qū)域的橋梁。我們可以如下編寫樣式規(guī)則來使內(nèi)容流向區(qū)域。

這個地方flow-into跟flow-from后面的單詞是你自己定義的！比如說我想把a容器的文字流b c區(qū)域，我可以設(shè)置flow-into:a或者你能想象到的任何名稱，之后用flow-from：你剛才用的名稱。

CSS Code復(fù)制內(nèi)容到剪貼板
  1. article {   
  2.     -webkit-flow-into: article;   
  3.     flow-into: article;   
  4. }   
  5. .demo-wrapper aside {   
  6.     -webkit-flow-into: aside;   
  7.     flow-into: aside;   
  8. }   
  9. #region-1,   
  10. #region-2,   
  11. #region-4 {   
  12.     -webkit-flow-from: article;   
  13.     flow-from: article;   
  14. }   
  15. #region-3 {   
  16.     -webkit-flow-from: aside;   
  17.     flow-from: aside;   
  18. }  

添加一些額外的css,我們將在瀏覽器中得到下面的結(jié)果。

相關(guān)文章

  • CSS3 最強二維布局系統(tǒng)之Grid 網(wǎng)格布局

    CS3的Grid網(wǎng)格布局是目前最強的二維布局系統(tǒng),可以同時對列和行進(jìn)行處理,將網(wǎng)頁劃分成一個個網(wǎng)格,可以任意組合不同的網(wǎng)格,做出各種各樣的布局，本文介紹CSS3 最強二維布局系
    2025-02-27

  • 如何使用CSS3實現(xiàn)波浪式圖片墻

    本文介紹了如何使用CSS3的transform屬性和動畫技巧實現(xiàn)波浪式圖片墻,通過設(shè)置圖片的垂直偏移量,并使用動畫使其周期性地改變位置,可以創(chuàng)建出動態(tài)且具有波浪效果的圖片墻,同
    2025-02-27

  • CSS3模擬實現(xiàn)一個雷達(dá)探測掃描動畫特效(最新推薦)

    文章介紹了如何使用CSS3實現(xiàn)一個雷達(dá)探測掃描的效果,包括夜色背景、蜘蛛網(wǎng)盤、掃描體的轉(zhuǎn)動效果、尾巴陰影以及被掃描到的光點,通過HTML和CSS的配合,實現(xiàn)了豐富的動畫效果,
    2025-02-21

  • css3 display:flex 彈性盒模型的使用方法

    CSS3的Flexbox是一種強大的布局模式,通過設(shè)置display:flex可以輕松實現(xiàn)對齊、排列和分布網(wǎng)頁元素,它解決了傳統(tǒng)布局方法中的對齊、間距分配和自適應(yīng)布局等問題,接下來通過本
    2025-02-19

  • css3 實現(xiàn)icon刷新轉(zhuǎn)動效果

    本文給大家介紹css3 實現(xiàn)icon刷新轉(zhuǎn)動效果，文章開頭給大家介紹了webkit-transform、animation、@keyframes這三個屬性，結(jié)合實例代碼給大家介紹的非常詳細(xì)，感興趣的朋友一
    2025-02-19

  • CSS3動態(tài)效果之過渡屬性(最新推薦)

    CSS3過渡屬性用于實現(xiàn)元素從一種樣式平滑過渡到另一種樣式,通過設(shè)置transition-property過渡屬性、transition-duration過渡時長transition-timing-function過渡函數(shù)和trans
    2025-02-19

  • CSS3實現(xiàn)動態(tài)旋轉(zhuǎn)加載樣式的示例代碼

    本文介紹了如何使用CSS3創(chuàng)建一個簡單的動態(tài)旋轉(zhuǎn)加載樣式,通過定義一個帶有類名“l(fā)oader”的HTML元素,并使用CSS樣式和@keyframes規(guī)則來實現(xiàn)旋轉(zhuǎn)動畫,你可以根據(jù)需要調(diào)整樣式
    2025-02-19

  • 使用CSS3實現(xiàn)平滑的過渡動畫效果(實例代碼)

    這篇文章主要介紹了如何使用CSS3的transition屬性實現(xiàn)平滑的過渡動畫，本文通過實例代碼給大家介紹的非常詳細(xì)，感興趣的朋友一起看看吧
    2025-02-13

  • CSS3中使用flex和grid實現(xiàn)等高元素布局的示例代碼

    本文介紹了使用CSS3中的Flexbox和Grid布局實現(xiàn)等高元素布局的方法,通過簡單的兩列實現(xiàn)、每行放置3列以及全部代碼的展示,展示了這兩種布局方式的實現(xiàn)細(xì)節(jié)和效果，感興趣的朋
    2025-02-11

  • 使用CSS3和SVG創(chuàng)建圓形進(jìn)度條動畫效果

    CSS3和SVG的結(jié)合使用為網(wǎng)頁設(shè)計帶來了創(chuàng)新的動態(tài)視覺效果,本文通過一個圓形進(jìn)度條的動畫特效示例,展示了如何利用CSS3的動畫功能和SVG的矢量圖形能力來創(chuàng)建豐富的用戶交互體
    2024-10-24

最新評論