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:
La leggenda di tre regni
Il primo capitolo
Festeggiare i eroi di Youyang e stabilire una lega di tre
Sconfiggere l'eroina dei Guanmian e ottenere la prima vittoria
Si dice che il destino del mondo è così, che dopo un lungo periodo di separazione, i paesi si riuniranno, e dopo un lungo periodo di unione, si separeranno di nuovo: alla fine del periodo Zhou, sette stati si contendevano, e furono uniti sotto la dinastia Qin; dopo la distruzione della dinastia Qin, i stati di Chu e Han si contendevano, e furono nuovamente uniti sotto la dinastia Han. La dinastia Han, da quando il fondatore Gaozu ha sconfitto il serpente bianco e ha iniziato la ribellione, ha unificato il cielo e la terra. Dopo la risurrezione di Guangwu, è stata trasmessa fino all'Imperatore Xian, e poi è stata divisa in tre stati. L'origine della distruzione può essere attribuita a Huan e Ling due imperatori. L'imperatore Huan ha represso le persone di buona volontà, e ha creduto nei eunuchi. Dopo la morte dell'imperatore Huan, l'imperatore Ling è salito al trono, il generale in capo Dou Wu e il cancelliere Chen Fan lo hanno assistito; in quel momento, gli eunuchi come Cao Jie hanno esercitato il potere, Dou Wu e Chen Fan avevano pianificato di ucciderli, ma il segreto non è stato mantenuto, e sono stati uccisi. Dalla allora in poi, i funzionari imperiali sono diventati sempre 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 all'angolo del palazzo. Solo un grande serpente azzurro è volato giù dal soffitto, avvolgendosi attorno alla sedia. L'imperatore è caduto in shock, e i suoi servitori lo hanno aiutato a entrare nel palazzo, mentre tutti i funzionari sono fuggiti. Dopo un po', il serpente è scomparso. Improvvisamente ci sono state forti tempeste e grandinate, che hanno durato fino a mezzanotte, distruggendo molte case. Nel febbraio del quarto anno di Jian宁, si è verificato un terremoto a Luoyang; anche l'acqua del mare è stata inondata, e tutti i residenti lungo la costa sono stati trascinati via dalle onde. Nel primo anno di Guanghe, una gallina ha cambiato sesso diventando un gallo. Il primo giorno del sesto mese, una nube nera di oltre dieci cubiti è volata nel palazzo Wende. Nel settimo mese dell'autunno, un arcobaleno è apparso nella Halla di Giada, e le colline di Wu yuan sono crollate. Tutti questi segni infausti non sono solo uno. L'imperatore ha emanato un editto chiedendo ai ministri la causa delle calamità, e il consigliere Cai Yong ha presentato una proposta, affermando che il mutamento della gallina e la caduta della nube sono stati causati dall'intervento delle donne e degli eunuchi nella politica, e le sue parole erano molto dirette. L'imperatore ha guardato il documento con tristezza e si è alzato per cambiarsi. Cao Jie lo ha guardato dietro le spalle e ha reso noto a tutti; quindi Cai Yong è stato accusato di reato e mandato a vivere nelle campagne. Dopo di che, Zhang Rang, Zhao Zhong, Feng Mu, Duan Gui, Cao Jie, Hou Luan, Jian 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 e lo chiamava 'Padre'. La politica del palazzo è stata sempre peggiore, portando alla disperazione del popolo e all'insurrezione dei banditi.
...... ......
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 Creare colonne multiple
Proprietà che regola il numero di colonne che l'elemento dovrebbe dividere.
Esempio
div { L'esempio seguente divide il testo dell'elemento <div> in 3 colonne: }
column-count: 3;
column-gap
CSS Specificare l'intervallo tra le colonne
Proprietà che regola l'intervallo tra le colonne.
Esempio
div { L'esempio seguente specifica che lo spazio tra le colonne dovrebbe essere di 40 pixel: }
column-gap: 40px;
column-rule-style
CSS Regole delle colonne
Esempio
div { Proprietà che regola lo stile delle regole tra le colonne: }
column-rule-width
column-rule-style: solid;
Esempio
div { Proprietà che regola la larghezza delle regole tra le colonne: }
column-rule-color
column-rule-width: 1px;
Esempio
div { Proprietà che regola il colore delle regole tra le colonne: }
La proprietà column-rule è utilizzata per impostare la proprietà abbreviata di 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à che 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à che assegna una larghezza consigliata ottimale alle colonne.
L'esempio seguente stabilisce che la larghezza consigliata per le colonne 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 che l'elemento dovrebbe dividere. |
column-fill | Regola come riempire le colonne. |
column-gap | Specificare lo spaziatura tra le colonne. |
column-rule | Utilizzato per impostare la proprietà abbreviata di 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 per le colonne. |
Columns | Proprietà abbreviate per impostare column-width e column-count. |
- Pagina Precedente Pagine CSS
- Pagina Successiva Interfaccia Utente CSS