CSS3 berbilang ...LOG MASUK

CSS3 berbilang lajur

Berbilang lajur CSS3

CSS3 boleh mereka bentuk kandungan teks ke dalam reka letak berbilang lajur seperti surat khabar

Berikut ialah atribut berkaitan yang digunakan oleh lajur
1.lebar-lajur : <panjang> auto menetapkan atau mendapatkan semula lajur objek
seperti: -webkit-column-count:3; daripada objek

seperti: column-gap:normal;column-gap:40px;


4.column-rule: [ column-rule-width ] || [ column-rule-style ] | |. [ column-rule-color ] tetapan Atau dapatkan semula sempadan antara lajur objek. Sifat komposit. Setara dengan atribut sempadan

seperti: column-rule:10px solid #090;


5.column-span: none |.

Contohnya: column-span:all;


6.column-fill: auto | balance Set atau dapatkan semula sama ada ketinggian semua lajur objek adalah seragam.

auto: Kandungan penyesuaian ketinggian lajur

keseimbangan: Ketinggian semua lajur disatukan dengan lajur tertinggi
Contohnya: isian lajur:keseimbangan;

7.pecah-lajur-sebelum : auto |. menghindarkan |.

auto: Ia tidak dipaksa atau dilarang untuk memutuskan baris sebelum elemen dan mencipta lajur baharu
sentiasa: Sentiasa putuskan baris sebelum elemen dan buat lajur baharu

elakkan: Elakkan putus baris sebelum elemen dan buat lajur baharu Lajur

8.column-break-after: auto|sentiasa|elakkan|kiri|kanan|halaman|lajur|elak-halaman|elak-lajur Sama ada hendak memecahkan garisan selepas menetapkan atau mendapatkan semula objek.


auto: Ia tidak dipaksa atau dilarang untuk memutuskan garisan selepas elemen dan menjana lajur baharu
sentiasa: Sentiasa putuskan baris selepas elemen dan menjana lajur baharu

elakkan: Elakkan putus baris selepas elemen dan jana Lajur baharu

9.column-break-inside: auto | avoid-page |.


auto: tidak memaksa mahupun melarang garis putus di dalam elemen dan mencipta lajur baharu
elakkan: elakkan baris pecah dalam elemen dan mencipta lajur baharu

Penciptaan CSS3 Berbilang- lajur

atribut kiraan lajur menentukan bilangan lajur yang akan dipecahkan. Contoh berikut membahagikan teks dalam elemen <div>

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<style> 
.newspaper
{
-moz-column-count:3; /* Firefox */
-webkit-column-count:3; /* Safari and Chrome */
column-count:3;
}
</style>
</head>
<body>
<p><b>注意:</b> Internet Explorer 9及更早 IE 版本浏览器不支持 column-count 属性。</p>
<div class="newspaper">
生长在非洲荒漠地带的依米花,默默无闻,少有人注意过它。许多旅人以为它只是一株草而已。但是,它会在一生中的某个清晨突然绽放出美丽的花朵。
那是无比绚丽的一朵花,似乎要占尽人世间所有色彩一样。它的花瓣儿呈莲叶状儿,每瓣自成一色:红、白、黄、蓝,与非洲大地上空的毒日争艳。
但是,它的花期很短,最多只有两天。两天后它就会随着母株一起枯萎,开花意味着它的生命的终结。
</div>
</body>
</html>

Jurang antara lajur dalam CSS3 berbilang lajur

atribut ruang-jurang menentukan jurang antara lajur.

Contoh berikut menentukan jurang 40 piksel antara lajur

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>php中文网(php.cn)</title> 
<style> 
.newspaper
{
-moz-column-count:3; /* Firefox */
-webkit-column-count:3; /* Safari and Chrome */
column-count:3;
-moz-column-gap:40px; /* Firefox */
-webkit-column-gap:40px; /* Safari and Chrome */
column-gap:40px;
}
</style>
</head>
<body>
<p><b>注意:</b> Internet Explorer 9及更早 IE 版本浏览器不支持 column-count 属性。</p>
<div class="newspaper">
在非洲的荒漠地带,植物的生长需要水分,而开花的植物对水分的需求更大。
非洲一般植物都有庞大的根系采水,以供自身的水分需求。但是依米花没有根系,
它只有惟一的一条主根,孤独地蜿蜒盘曲着钻入地底深处,寻找有水的地方。
那需要幸运和顽强努力,一株依米花往往需要四至五年的时间在干燥的沙漠里寻找水源,然后一点点积聚养分,
在完成蓓蕾所需要的全部养分后,它开花了!所以在它最美丽的时候,它因耗尽了自己的所有的养分而凋零。
</div>
</body>
</html>

Sempadan lajur CSS3

peraturan lajur The - atribut gaya menentukan gaya sempadan antara lajur

Menentukan bilangan lajur yang merentangi elemen

Contoh berikut menyatakan bahawa elemen <h2> span Atribut lebar lajur menentukan lebar lajur.

Sifat berbilang lajur CSS3Jadual berikut menyenaraikan semua sifat berbilang lajur CSS3: Penerangan

kiraan lajur Menentukan nombor lajur yang mana elemen harus dipecahkan.

isi lajur                                                                                                                                                                                                                         

Singkatan Kolum-Peraturan untuk semua lajur-peraturan-* sifat menentukan sempadan antara dua lajur gaya

lajur-peraturan-lebar menentukan ketebalan sempadan antara dua lajur

lajur- span Menentukan berapa lajur elemen harus span

lajur lebar Tentukan lebar lajur

Lajur Tetapkan singkatan warna lebar dan colorn-count

bahagian seterusnya
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <style> .newspaper { -moz-column-count:3; /* Firefox */ -webkit-column-count:3; /* Safari and Chrome */ column-count:3; } </style> </head> <body> <p><b>注意:</b> Internet Explorer 9及更早 IE 版本浏览器不支持 column-count 属性。</p> <div class="newspaper"> 生长在非洲荒漠地带的依米花,默默无闻,少有人注意过它。许多旅人以为它只是一株草而已。但是,它会在一生中的某个清晨突然绽放出美丽的花朵。 那是无比绚丽的一朵花,似乎要占尽人世间所有色彩一样。它的花瓣儿呈莲叶状儿,每瓣自成一色:红、白、黄、蓝,与非洲大地上空的毒日争艳。 但是,它的花期很短,最多只有两天。两天后它就会随着母株一起枯萎,开花意味着它的生命的终结。 </div> </body> </html>
babperisian kursus