CSS動畫 多列

2022-05-21 21:42:22 字數 1381 閱讀 5964

1.css3中可以建立多列來對文字或者區域進行布局

2.屬性:

column-count 文字列

column-gap 文字寬度

column-rule 文字線條

3.下面是個例子:

在.html檔案中:

1

doctype html

>

2<

html

lang

="en"

>

3<

head

>

4<

meta

charset

="utf-8"

>

5<

title

>動畫

title

>

6<

link

rel="stylesheet"

type

="text/css"

href

="style05.css"

>

7head

>

8<

body

>

9<

div

class

="div1"

>

1011

1213

1415

1617

1819

2021

2223

2425

2627

2829

3031

3233

3435

3637

3839

4041

4243

4445

4647

4849

5051

5253

5455

5657

5859

6061

6263

6465

6667

6869

7071

7273

7475

7677

7879

8081

8283

8485

8687

8889

90div

>

91body

>

92<

html

/>

在.css檔案中:

1

.div1

執行結果:

注意:column-rule 效果沒有出現,不知道什麼原因,各位知道請指點指點!

CSS多列布局

多列布局適合純文字版式設計,如報紙內和雜誌類網頁布局,不適合做網頁結構布局。靈活使用多列布局特性,可以實現在多列中顯示文字和,從而節省大量的網頁空間。如果網頁上的文字很長,多列布局特性就能夠發揮它的用武之地。相容性參考 columns是多列布局特性的基本屬性,類似邊框特性中的border屬性,該屬性...

CSS 多列等高

高度不一的列以等高方式布局。設計師說某頁面的新聞介紹,由於新聞內容不同導致顯示區域的高度不一致,現需要使其高度視覺上保持一致。小加同學覺得必須迅速解決,讓設計師妹妹知道我們程式師哥哥的威武。原型設計稿大致如下 直接使用bootstrap的col 來實現這個簡單的布局就ok啦 class sectio...

CSS多列布局

效果 我的爸爸剛剛30出頭,他的面容,要比他的年齡,成熟穩重的多,但是,他可沒有蒼老憔悴哦!爸爸的身高有180公分,體重75公斤,是個標準的型男身材。如果,我說我爸爸是個大帥哥,可一點也沒有撒謊呢!在我們小區裡,就組建了乙個籃球隊,爸爸,可是他那隊裡的佼佼者呢!每當,我們小區和其他小區,有籃球比賽的...