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

使用CSS3實(shí)現(xiàn)多列布局與多背景的技巧

MDN   發(fā)布時(shí)間：2016-02-29 11:18:40   作者：佚名   我要評(píng)論
這篇文章主要介紹了使用CSS3實(shí)現(xiàn)多列布局與多背景的技巧,包括多列欄目的高度平衡和多間隙等一些細(xì)節(jié)方面的調(diào)整方法講解,需要的朋友可以參考下

多列布局
CSS多列布局繼承自塊級(jí)布局模式，允許簡(jiǎn)單地定義多列文本。 一行太長(zhǎng)的文字讀起來很麻煩；當(dāng)人眼從一行過長(zhǎng)的文字末端移動(dòng)到下一行開始處，就容易弄錯(cuò)到底該讀哪一行。因此，為了最優(yōu)化使用大的顯示屏幕，設(shè)計(jì)者應(yīng)該限制文字段落的寬度而并排排列，就像報(bào)紙一樣。

糟糕的是如果不使用CSS和HTML在特定的位置強(qiáng)制換行，或者嚴(yán)格限制文本中允許的標(biāo)記，或者夸張地使用腳本的話，這是不可能實(shí)現(xiàn)的。該限制通過從傳統(tǒng)的塊級(jí)布局模塊中延伸出來的新的CSS屬性得以解決。

列計(jì)數(shù)器和寬度

有兩個(gè)CSS屬性控制是否實(shí)現(xiàn)多列布局和顯示多少列： column-count and column-width。

屬性 column-count 設(shè)置特定數(shù)量的列數(shù)。例如，

CSS Code復(fù)制內(nèi)容到剪貼板
  1. <div style="column-count:2;">Lorem ipsum dolor sit amet, consectetur adipisicing elit,    
  2. sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,    
  3. quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.    
  4. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat    
  5. nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa    
  6. qui officia deserunt mollit anim id est laborum</div>   

會(huì)以兩列的方式顯示內(nèi)容：(如果你正使用支持多列布局的瀏覽器的話):


屬性 column-width 設(shè)置期望的最小列寬。如果 column-count 沒有設(shè)置，那么瀏覽器就會(huì)以合適的寬度盡量顯示更多的列。

CSS Code復(fù)制內(nèi)容到剪貼板
  1. <div style="column-width:20em;">Lorem ipsum dolor sit amet, consectetur adipisicing elit,   
  2. sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,   
  3. quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.   
  4. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat   
  5. nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa   
  6. qui officia deserunt mollit anim id est laborum</div>   

變成：
2016229112140815.png (677×124)

在多列塊中，內(nèi)容會(huì)自動(dòng)從一列換到另一列中。所有 HTML， CSS 和 DOM 功能在列之間都得到支持, 比如編輯和打印。

columns 屬性簡(jiǎn)寫

多數(shù)時(shí)候，網(wǎng)頁設(shè)計(jì)者都會(huì)使用 column-count 和 column-width 的一個(gè). 由于它們的值沒有重疊，一般使用簡(jiǎn)寫屬性 columns。例如，

CSS聲明 column-width:12em 可替換成：

CSS Code復(fù)制內(nèi)容到剪貼板
  1. <div style="columns:12em">Lorem ipsum dolor sit amet, consectetur adipisicing elit,    
  2. sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,    
  3. quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.    
  4. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat    
  5. nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa    
  6. qui officia deserunt mollit anim id est laborum</div>  

2016229112218658.png (724×156)

CSS聲明 column-count:4 可替換成：

CSS Code復(fù)制內(nèi)容到剪貼板
  1. <div style="columns:4">Lorem ipsum dolor sit amet, consectetur adipisicing elit,    
  2. sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,    
  3. quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.    
  4. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat    
  5. nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa    
  6. qui officia deserunt mollit anim id est laborum</div>  

2016229112306370.png (712×132)

CSS聲明 column-width:8em 和 column-count:12 可替換成：

CSS Code復(fù)制內(nèi)容到剪貼板
  1. <div style="columns:12 8em">Lorem ipsum dolor sit amet, consectetur adipisicing elit,    
  2. sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,    
  3. quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.    
  4. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat    
  5. nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa    
  6. qui officia deserunt mollit anim id est laborum</div>  

2016229112331052.png (741×151)

高度平衡

CSS3多列規(guī)范需要列高平衡：即，瀏覽器自動(dòng)設(shè)置最大列高，因此每列中的內(nèi)容高度大致相同。Firefox瀏覽器是這樣的。

然而，一些情況下，明確設(shè)置最大列高也是有用的，這樣內(nèi)容從第一列開始，盡可能多的生成列，甚至?xí)绯鲇疫呇?。因此，如果通過設(shè)置height 或 max-height 屬性來限制列高，在生成新的一列之前每一列都會(huì)僅允許增加到這個(gè)高度。該模型對(duì)布局來說也更高效。

列間隙

列之間有縫隙。建議值為1em。該值可通過設(shè)置多列模塊的 column-gap 屬性來修改：

CSS Code復(fù)制內(nèi)容到剪貼板
  1. <div style="column-width:20em; column-gap:2em;">Lorem ipsum dolor sit amet, consectetur adipisicing elit,    
  2. sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,    
  3. quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.    
  4. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat    
  5. nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa    
  6. qui officia deserunt mollit anim id est laborum</div>  

2016229112412341.png (712×125)

優(yōu)雅降級(jí)
多列屬性會(huì)被不支持多列模型的瀏覽器忽略。因此，為這些瀏覽器創(chuàng)建單列結(jié)構(gòu)而為支持多列的瀏覽器創(chuàng)建多列結(jié)構(gòu)相對(duì)來說比較簡(jiǎn)單。

注意不是所有的瀏覽器都支持不帶前綴的屬性名。為了在大多數(shù)現(xiàn)代瀏覽器中應(yīng)用這種特性，每個(gè)屬性必須寫三次： 一次用 -moz 前綴，一次用 -webkit 前綴，一次不使用前綴

多背景
通過使用 CSS3，你可以向元素應(yīng)用多個(gè)背景。這些背景相互堆疊，第一個(gè)背景放在最上面，最后一個(gè)背景放在最下面。 僅最后一個(gè)背景允許擁有背景色。

指定多個(gè)背景很簡(jiǎn)單：

CSS Code復(fù)制內(nèi)容到剪貼板
  1. .myclass {   
  2.   background: background1, background 2, ..., backgroundN;   
  3. }  

你既可以使用簡(jiǎn)寫屬性 background 也可以使用除 background-color 外的獨(dú)立屬性。即,，下面的屬性可以用屬性列表指定， 每個(gè)背景一個(gè)： background，background-attachment，background-clip, background-image，background-origin，background-position， background-repeat， background-size。

示例
該例中，三個(gè)背景進(jìn)行堆疊：火狐標(biāo)志,一個(gè)線性漸變， 和一張帶有花的圖片：

CSS Code復(fù)制內(nèi)容到剪貼板
  1. .multi_bg_example {   
  2.   background: url(http://demos.hacks.mozilla.org/openweb/resources/images/logos/firefox-48.png),   
  3.         linear-gradient(to rightright, rgba(255, 255, 255, 0),  rgba(255, 255, 255, 1)),   
  4.         url(http://demos.hacks.mozilla.org/openweb/resources/images/patterns/flowers-pattern.jpg);   
  5.   background-repeat: no-repeat, no-repeat, repeat;   
  6.   background-position: bottombottom rightright, left, rightright;   
  7. }  

結(jié)果
2016229112453645.png (202×102)

相關(guān)文章

  • CSS3實(shí)現(xiàn)多背景模擬動(dòng)態(tài)邊框的效果

    前幾天在工作的時(shí)候遇到一個(gè)問題，項(xiàng)目需要實(shí)現(xiàn)一個(gè)效果，當(dāng)鼠標(biāo)移入一個(gè)元素的時(shí)候，元素出現(xiàn)一個(gè)動(dòng)態(tài)的邊框，通過網(wǎng)上查找資料看到有人推薦可以使用Css3來實(shí)現(xiàn)，后來試了
    2016-11-08

  • CSS3點(diǎn)擊按鈕實(shí)現(xiàn)背景漸變動(dòng)畫效果

    這篇文章給大家介紹的是，利用CSS3實(shí)現(xiàn)當(dāng)點(diǎn)擊按鈕的時(shí)候，按鈕的背景是漸變動(dòng)畫的效果，實(shí)現(xiàn)后的效果非常好，開發(fā)的時(shí)候利用這種效果的按鈕會(huì)給用戶一種非?？犰诺母惺埽?/div> 2016-10-19

  • CSS3條紋背景制作的實(shí)戰(zhàn)攻略

    這篇文章主要介紹了CSS3條紋背景制作的實(shí)戰(zhàn)攻略,根據(jù)Forefox瀏覽器和webkit內(nèi)核的瀏覽器兩種情況來分別講解,需要的朋友可以參考下
    2016-05-31

  • 用CSS3實(shí)現(xiàn)背景漸變的方法

    這篇文章主要介紹了用CSS3實(shí)現(xiàn)背景漸變的方法,作者并沒有給出效果demo這個(gè)比較殘念...需要的朋友可以參考下
    2015-07-14

  • css3中背景尺寸background-size詳解

    background-size是css3提供的一個(gè)新特性，它可以讓你隨心所欲的控制背景圖片的大小。下面我們來一步步看看這個(gè)新特性都有什么值得我們驚艷的地方
    2014-09-02

  • 使用CSS3的背景漸變Text Gradient 創(chuàng)建文字顏色漸變

    使用CSS3 的背景漸變 -webkit-gradient ，用一個(gè)背景漸變的 DIV 代替圖片。下面是實(shí)現(xiàn)效果示例，相比以上方案優(yōu)點(diǎn)是不使用圖片，減小請(qǐng)求量和流量
    2014-08-19

  • 多重CSS背景動(dòng)畫實(shí)現(xiàn)方法示例

    CSS背景動(dòng)畫很長(zhǎng)時(shí)間以來都是一個(gè)熱門話題，很多時(shí)候都是因?yàn)樾Ч貏e絢麗，而且不需要額外的技術(shù)。最近有人問我是否可以給頁面上一個(gè)指定的元素安排多重背景動(dòng)畫，答案是y
    2014-04-04

  • CSS3之多背景background使用示例

    CSS3之多背景background和CSS2的使用方法一樣，只不過圖片可以從1個(gè)圖片變成多個(gè)圖片了，其在CSS3的項(xiàng)目中運(yùn)用比較廣泛，大家有更好的案例要積極分享喲
    2013-10-18

  • CSS3之背景尺寸Background-size使用介紹

    CSS3背景尺寸Background-size，這個(gè)屬性是改變背景尺寸的通過各種不同是屬性值改變背景尺寸呈現(xiàn)的大小，下面為大家詳細(xì)介紹下其語法、瀏覽器兼容及使用示例，感興趣的朋友
    2013-10-14

  • css3背景_動(dòng)力節(jié)點(diǎn)Java學(xué)院整理

    這篇文章主要介紹了css3背景,CSS3規(guī)范中對(duì)背景這一部分，新加入了一些令人興奮的功能，如可以設(shè)置多個(gè)背景圖片、可以指定背景大小、設(shè)置背景漸變等功能。
    2017-07-11

最新評(píng)論