您好,登錄后才能下訂單哦!
本篇文章給大家分享的是有關(guān)CSS3的Regions擴(kuò)展的示例分析,小編覺得挺實(shí)用的,因此分享給大家學(xué)習(xí),希望大家閱讀完這篇文章后可以有所收獲,話不多說,跟著小編一起來看看吧。
這是一個(gè)adobe的提議:css Regions,提供在多個(gè)不同元素中排布內(nèi)容的方法。首先需要為內(nèi)容容器聲明一個(gè)flow屬性獨(dú)一無二的字符值,然后通過from()函數(shù)和內(nèi)容的屬性確定內(nèi)容將會(huì)在哪些元素內(nèi)排布:
1. .content { flow: foo; }
2. .target1, .target2 { content: from(foo); }
首先將內(nèi)容容器中的內(nèi)容放置到第一個(gè)元素target1中,如果有溢出,就將溢出的部分放在target2中顯示。說得更明白一點(diǎn),她不是在另一個(gè)target中重復(fù)內(nèi)容,而是繼續(xù)在第二個(gè)target中顯示1中沒有完全顯示的內(nèi)容。請看下面的例子:
region布局效果
隨便說一下,兩個(gè)目標(biāo)區(qū)域不需要在DOM或者布局中相鄰,如果需要的話,她們完全可以是同一個(gè)頁面的兩個(gè)毫不相干的人或者仇人(但是這樣的話會(huì)帶來可及性問題)。
Regions和Exclusions一樣還不被任何瀏覽器支持,但是你可以從adobe的實(shí)驗(yàn)室中下載它,親自試一試。
現(xiàn)在,讓我們了解這個(gè)擴(kuò)展吧,他們可以被分為4類:
線性內(nèi)容(Threading content): 從一個(gè)區(qū)域“流向”另一個(gè)區(qū)域的內(nèi)容。
任意形狀的容器(Arbitrarily shaped containers): 在非矩形區(qū)域內(nèi)顯示文本。
任意形狀環(huán)繞(Arbitrarily shaped exclusion): 文本環(huán)繞非矩形區(qū)域。
區(qū)域樣式(Region styling):根據(jù)流向區(qū)域顯示內(nèi)容。
下面是各種分類的例子:
內(nèi)容流(Content flow)
在典型的HTML文檔中,文字可以在多個(gè)區(qū)域顯示,但是每個(gè)區(qū)域中的文字是不相關(guān)的(見圖1)。如果你想要跨多個(gè)列顯示文本,或者使用別的你需要的更復(fù)雜的區(qū)域來手動(dòng)。在用戶放大文字或者用戶的字體比你設(shè)定的字體大時(shí),這可能會(huì)無法亂掉。這個(gè)方法(css3 region)同樣是的擁有在縮放窗口是自適應(yīng)的流體布局成為可能,或者,當(dāng)顯示在平板上時(shí),自適應(yīng)豎屏(portrait)或者橫屏(landscape)顯示。
文字跨3個(gè)不同寬的列顯示
如果你想要單獨(dú)地指定一托內(nèi)容(比如文字和圖片),那些內(nèi)容如何在一串區(qū)域內(nèi)顯示(flow)呢?這正是內(nèi)容流(content flow)要做的。
要使用它,通過flow屬性賦予內(nèi)容的容器一個(gè)名字,這樣做會(huì)將內(nèi)容從普通的CSS布局流中去掉,然后你可以插入這個(gè)線程到1個(gè)或多個(gè)其他區(qū)域——使用from()作為content屬性的值。
上面的三列布局的代碼如下:
CSS
CSS Code復(fù)制內(nèi)容到剪貼板
#source {
flow: "main-thread";
}
.region {
content: from(main-thread);
background: #C5DFF0;
}
HTML
XML/HTML Code復(fù)制內(nèi)容到剪貼板
<div id="source"> <p>Lorem ipsum dolor [...]</p> </div>
<div id="region1" class="region"></div>
<div id="region2" class="region"></div>
<div id="region3" class="region"></div>
你可以在一個(gè)頁面中聯(lián)合多個(gè)命名的flow。你也可以使用content-order屬性來控制文字流的順序。如果沒有指定,將會(huì)使用正常的文檔順序。
通過這個(gè)簡單的構(gòu)件,你可以實(shí)現(xiàn)更復(fù)雜的布局,包括多列文本、不同寬高的列,以及跨越多個(gè)列的區(qū)域。
文字穿越堆疊的區(qū)域和列
形狀環(huán)繞(Wrap shape)
使用形狀環(huán)繞,你可以控制文字經(jīng)過區(qū)域的形狀(見圖3)。你也可以使用這個(gè)屬性搭配內(nèi)容流或者單獨(dú)的創(chuàng)建更有趣的設(shè)計(jì)。
文字內(nèi)容顯示在自定義形狀的內(nèi)部
要使用這個(gè)特性,你需要使用wrap-shape屬性來定義形狀,并設(shè)定wrap-shape-mode屬性為需要的值。通過制定content的值,文字將顯示在形狀內(nèi)部。
上面的現(xiàn)實(shí)心形的代碼如下:
CSS
.circle{ /* 定義元素形狀為一個(gè)圓*/
wrap-shape: polygon(0px, 150px /* ...更多點(diǎn)*/);
wrap-shape-mode: content;
}
.heart{ /* 定義元素形狀為心形*/
wrap-shape: polygon(150px, 32px /* ...更多的點(diǎn) */);
wrap-shape-mode: content;
}
HTML
<div class="circle"></div>
<div class="heart"></div>
我們的基于WebKit原型支持使用一個(gè)簡單的多邊形指定一個(gè)形狀,但是你可以想象其它的集合體也可以被用于設(shè)定形狀,或者甚至使用一張圖片的alpha值。。。
環(huán)繞(Exclusions)
通過使用wrap-shap-mode屬性的其它值,你可以創(chuàng)建不同的效果,包括指定的wrap-shape 屬性可以理解為要完全避開的區(qū)域
文字環(huán)繞在自定義圖形周圍
CSS
.exclusion{
/* 文字環(huán)繞整個(gè)元素 */
wrap-shape-mode: around;
}
HTML
<div class="exclusion circle">
<p>Lorem ipsum dolor [...]</p>
</div>
區(qū)域樣式(Region Styling)
在雜志中,指定內(nèi)容環(huán)繞設(shè)計(jì)中的一個(gè)特定的區(qū)域是很常見的。我們稱之為區(qū)域樣式。例子展示了文字環(huán)繞在第一個(gè)區(qū)塊(包括introduction標(biāo)題的部分)被設(shè)定為深藍(lán)色,而余下的文字則為灰色
文字樣式依賴它流入的區(qū)域
CSS
p { color: gray: }
@region-style #region_1 {
p { color: #0C3D5F; }
}
HTML
<div id="article">
<h2>Introduction</h2>
<p>This is an example [...]</p>
</div>
<div id="region_1"></div>
<div id="region_2"></div>
<div id="region_3"></div>
<div id="region_4"></div>
區(qū)域樣式目前還沒有在Adobe Labs的這個(gè)webkit原型里面實(shí)現(xiàn)。
以上就是CSS3的Regions擴(kuò)展的示例分析,小編相信有部分知識點(diǎn)可能是我們?nèi)粘9ぷ鲿?huì)見到或用到的。希望你能通過這篇文章學(xué)到更多知識。更多詳情敬請關(guān)注億速云行業(yè)資訊頻道。
免責(zé)聲明:本站發(fā)布的內(nèi)容(圖片、視頻和文字)以原創(chuàng)、轉(zhuǎn)載和分享為主,文章觀點(diǎn)不代表本網(wǎng)站立場,如果涉及侵權(quán)請聯(lián)系站長郵箱:is@yisu.com進(jìn)行舉報(bào),并提供相關(guān)證據(jù),一經(jīng)查實(shí),將立刻刪除涉嫌侵權(quán)內(nèi)容。