Colonne CSS
- Pagina precedente Pagine CSS
- Pagina successiva Interfaccia utente CSS
La layout a più colonne di CSS
La layout a più colonne di CSS ci permette di definire facilmente il testo a più colonne - come un giornale:
Il romanzo delle Tre Regni
Il primo capitolo
La cena a Yu Garden ha visto tre eroi unirsi
La decapitazione degli eroi dei gialli calzoni ha stabilito la prima vittoria
Parlando delle grandi tendenze del mondo, il separato diventa unito e l'unito diventa separato: alla fine del periodo Zhou, i sette stati si contendevano, e furono inglobati nella Qin; dopo la distruzione della Qin, Chu e Han si contendevano, e furono nuovamente inglobati nel Han; la dinastia Han, dopo che il fondatore Gaozu ha sconfitto il serpente bianco e ha sollevato la ribellione, ha unificato il mondo. Dopoward, la riunione di Guangwu, è stata trasmessa all'Imperatore Xian, e infine è stata divisa in tre stati. L'origine della distruzione può essere ricondotta a Huan e Ling, due imperatori. L'imperatore Huan ha limitato i buoni, e ha creduto nei eunuchi. Dopo la morte dell'imperatore Huan, l'imperatore Ling è salito al trono, il generale He Wu e il cancelliere Chen Fan lo hanno aiutato a governare; in quel tempo, gli eunuchi Cao Jie e altri avevano il potere, He Wu e Chen Fan avevano pianificato di ucciderli, ma il loro piano non era segreto, e furono uccisi. Dalla allora in poi, i eunuchi sono diventati ancora più arroganti. Il 15 aprile del secondo anno di Jian宁, l'imperatore si trovava nel Palazzo Wende. Mentre stava salendo sul trono, un forte vento si è sollevato nell'angolo del palazzo. Un grande serpente azzurro è volato dal soffitto, si è avvolto attorno alla sedia. L'imperatore è caduto a terra, è stato salvato rapidamente e portato nel palazzo, i funzionari hanno fuggito. Poco dopo, il serpente è scomparso. Improvvisamente ci sono stati grandi tuoni e piogge, e anche ghiaccio, che sono durati fino a mezzanotte, distruggendo molte case. Nel febbraio del quarto anno di Jian宁, c'è stato un terremoto a Luoyang; anche l'acqua del mare è stata inondata, i residenti lungo la costa sono stati trascinati via dalle onde nel mare. Nel primo anno di Guanghao, una gallina ha cambiato sesso diventando un gallo. Il primo giorno del sesto mese, una nuvola nera di più di dieci zollie è volata nel Palazzo Wende. Nel settimo mese dell'autunno, un arcobaleno è apparso nel Palazzo Yu, le montagne di Wuyuan sono crollate. Tutti questi segni infausti non sono solo uno. L'imperatore ha emanato un editto per chiedere ai funzionari la causa delle calamità, il consigliere Cai Yong ha presentato una proposta, affermando che il cambiamento di sesso della gallina e la trasformazione della nuvola in un gallo sono il risultato dell'intervento delle donne e degli eunuchi nella politica, le sue parole erano piuttosto dirette. L'imperatore ha guardato il documento e ha sospirato, poi si è alzato per cambiarsi. Cao Jie ha guardato dietro di lui, e ha annunciato tutto ai suoi intorno; quindi Cai Yong è stato accusato di reato e inviato a vivere nella campagna. Dopoward, Zhang Rang, Zhao Zhong, Feng Mu, Duan Gui, Cao Jie, Hou Luan, Jia Shuo, Cheng Kuang, Xia Yun, Guo Sheng, dieci persone si sono uniti per fare il male, e sono stati chiamati 'Dieci Eunuchi'. L'imperatore ha rispettato Zhang Rang, chiamandolo 'Padre'. La politica del governo è diventata sempre peggiore, portando al desiderio della gente di tutto il mondo di essere in ribellione, e i banditi sono fioriti.
...... ......
Proprietà CSS Multi-colonna
...... ......
column-count
column-gap
column-rule-style
column-rule-width
column-rule-color
column-rule
Column-span
Column-width
In questa sezione, imparerai le seguenti proprietà multi-colonna:
Supporto del Browser
Proprietà | I numeri nella tabella indicano la versione del browser che supporta completamente l'attributo. | Chrome | IE | Firefox | Safari |
---|---|---|---|---|---|
column-count | 71.0 | 50.0 | 10.0 | 52.0 | 9.0 |
column-gap | 71.0 | 50.0 | 10.0 | 52.0 | 9.0 |
column-rule | 71.0 | 50.0 | 10.0 | 52.0 | 9.0 |
column-rule-color | 71.0 | 50.0 | 10.0 | 52.0 | 9.0 |
column-rule-style | 71.0 | 50.0 | 10.0 | 52.0 | 9.0 |
column-rule-width | 71.0 | 50.0 | 10.0 | 52.0 | 9.0 |
Column-span | 71.0 | 50.0 | Opera | 52.0 | 9.0 |
Column-width | 71.0 | 50.0 | 10.0 | 52.0 | 9.0 |
37.0
column-count
CSS Crea Multi-colonna
Proprietà stabilisce il numero di colonne che l'elemento dovrebbe essere diviso.
Esempio
div { L'esempio seguente suddivide il testo dell'elemento <div> in 3 colonne: }
column-count: 3;
column-gap
CSS Specifica l'intervallo tra le colonne
Proprietà stabilisce l'intervallo tra le colonne.
Esempio
div { L'esempio seguente specifica che lo spaziatura tra le colonne dovrebbe essere di 40 pixel: }
column-gap: 40px;
column-rule-style
CSS Regole di Colonna
Esempio
div { Proprietà stabilisce lo stile delle regole tra le colonne: }
column-rule-width
column-rule-style: solid;
Esempio
div { Proprietà stabilisce la larghezza delle regole tra le colonne: }
column-rule-color
column-rule-width: 1px;
Esempio
div { Proprietà stabilisce il colore delle regole tra le colonne: }
La proprietà column-rule è usata per impostare la proprietà abbreviata per tutti i column-rule-*.
L'esempio seguente imposta la larghezza, lo stile e il colore delle regole tra le colonne:
Esempio
div { column-rule: 1px solid lightblue; }
Specificare il numero di colonne che l'elemento dovrebbe attraversare
Column-span
Proprietà stabilisce quante colonne l'elemento dovrebbe attraversare.
L'esempio seguente stabilisce che l'elemento <h2> dovrebbe attraversare tutte le colonne:
Esempio
h2 { column-span: all; }
Specificare la larghezza della colonna
Column-width
Proprietà assegna una larghezza consigliata alla colonna.
L'esempio seguente stabilisce che la larghezza consigliata della colonna dovrebbe essere di 100px:
Esempio
div { column-width: 100px; }
Proprietà CSS Multi-colonna
La tabella seguente elenca tutte le proprietà multi-colonna:
Proprietà | Descrizione |
---|---|
column-count | Regola il numero di colonne da dividere l'elemento. |
column-fill | Regola come riempire le colonne. |
column-gap | Specificare lo spaziatura tra le colonne. |
column-rule | Usato per impostare la proprietà abbreviata per tutti i column-rule-*. |
column-rule-color | Regola il colore delle regole tra le colonne. |
column-rule-style | Regola lo stile delle regole tra le colonne. |
column-rule-width | Regola la larghezza delle regole tra le colonne. |
Column-span | Definire quante colonne un elemento dovrebbe attraversare. |
Column-width | Specificare la larghezza consigliata migliore per le colonne. |
Columns | Proprietà abbreviate per impostare column-width e column-count. |
- Pagina precedente Pagine CSS
- Pagina successiva Interfaccia utente CSS