Si pensa che le strisce zebrate, o la colorazione o l'ombreggiatura di righe alternate su un tavolo, migliorino l'usabilità di un tavolo guidando l'occhio dell'utente lungo una riga. Questo metodo è stato utilizzato nella stampa per anni e molti designer cercano di emulare questa tecnica quando creano tabelle la rete. CSS ha reso più facile ottenere lo striping zebrato, ma, fino a CSS3, ha ancora comportato un po' di ingombrante codifica.
Con l'avvento del selettore nth-child di CSS3, siamo in grado di indirizzare più elementi in un documento creando un "contatore" che salta i bambini specificati nell'albero del documento. Questo ci consente, in particolare, di applicare uno stile solo alle righe pari o dispari di una tabella. Questo articolo descrive in dettaglio come utilizzare nth-child correttamente.
I brutti vecchi tempi...
Prima di iniziare a spiegare come utilizzare questo nuovo selettore, esaminiamo il vecchio modo di fare le cose. Innanzitutto, dovremmo aggiungere un attributo class a ogni altra riga della tabella:
| Salmone | Gli Omega-3 aiutano il cervello a svilupparsi correttamente, riducono il rischio di Alzheimer e aiutano a prevenire le malattie cardiache. |
| Spinaci | Ottima fonte di folati e luteina. Previene difetti alla nascita, malattie cardiache, ictus e protegge la pelle dai danni del sole. |
| Patate dolci | Il beta carotene protegge la pelle dai danni del sole. |
Fortunatamente, il nostro tavolo è abbastanza piccolo, quindi non richiede troppo lavoro. Ma puoi immaginare quanto sarebbe noioso questo processo se la nostra tabella fosse lunga decine di righe! Aggiungeremmo quindi una regola CSS mirata a quelle righe:
Tr.odd ( colore di sfondo: #99ff99; )
Sebbene questo metodo funzioni, è un po' inefficiente in quanto richiede un markup aggiuntivo nel documento HTML. Questo markup, a sua volta, non aggiunge nulla di semanticamente prezioso: le righe dispari non svolgono una funzione diversa dalle righe pari; vogliamo solo che abbiano un aspetto diverso. Quindi, non abbiamo tenuto la struttura separata dalla presentazione. Per non parlare del fatto che la codifica di una tabella di grandi dimensioni in questo modo può essere un compito frustrante.
Presentazione dell'ennesimo figlio
CSS3, tuttavia, include selettori che ci consentono di tenere le mani lontane dal markup e utilizzare solo CSS per selezionare le righe che vogliamo applicare allo stile. Il relativo selettore, l'ennesimo selettore figlio, è un po' complicato, quindi prendiamoci un momento per capire come funziona.
Il selettore nth-child ha come target gli elementi in un albero di documenti che hanno un certo numero di fratelli prima esso. Dove n è un numero intero, :nth-child(an+b) corrisponderebbe all'elemento che ha an+b-1 fratelli prima di esso.
Cosa significa questo?
Quel n è fondamentalmente un contatore: inizia con zero, quindi sale in modo incrementale fino a esaurire gli elementi figli. Quindi la variabile b rappresenta il punto di partenza del contatore, in altre parole, la posizione del primo elemento da cui iniziamo a contare. Infine, la variabile a rappresenta le posizioni degli elementi che abbiniamo successivamente.
Per chiarire un po' le cose, analizziamo un esempio:
:ennesimo figlio( 5 n+ 2 )
Nel nostro ipotetico esempio sopra, la variabile b è impostata come due, il che significa che il primo elemento preso di mira è il secondo figlio sotto il genitore nell'albero del documento, il secondo paragrafo all'interno del corpo o il secondo elemento all'interno di un elenco.
Anche nell'esempio sopra, la variabile a è impostata su cinque, il che significa che anche un bambino su cinque deve essere preso di mira. Ora che abbiamo definito entrambe le variabili a e b, possiamo determinare a quali elementi figlio verrà applicato lo stile. Inserendo il valore iniziale di zero e contando fino a quando non esauriamo gli elementi figlio, possiamo determinare a quali elementi figlio viene assegnato lo stile.
In questo esempio, come mostrato nella Tabella 1, puoi vedere che il secondo elemento figlio è abbinato, quindi il settimo, quindi il dodicesimo e così via, finché non abbiamo esaurito gli elementi.
| Elemento figlio | Formule | ||
|---|---|---|---|
| n | 5n | 5n+2 | |
| 0 | n / a | n / a | |
| 1 | Y | ||
| 2 | Y | Y | |
| 3 | Y | ||
| 4 | Y | ||
| 5 | Y | Y | |
| 6 | Y | ||
| 7 | Y | Y | |
| 8 | Y | ||
| 9 | Y | ||
| 10 | Y | Y | |
| 11 | Y | ||
| 12 | Y | Y | |
Tabella 1. Dimostrazione dell'elemento figlio selezionato
Calcolo delle strisce zebrate
In che modo questo selettore ci aiuta con le strisce zebrate? Si noti che questa formula consente alcune configurazioni piuttosto complicate, rendendola molto versatile. Per indirizzare solo elementi pari o dispari, tuttavia, dobbiamo solo ricordare due tipi di selettori.
Per scegliere come target tutte le righe pari come mostrato nella Tabella 2, possiamo utilizzare il seguente selettore:
Tr:nth-child(2n)
| Quale elemento figlio viene selezionato? | ||
|---|---|---|
| Elemento figlio | Formule | |
| n | 2n | |
| 0 | n / a | n / a |
| 1 | Y | |
| 2 | Y | Y |
| 3 | Y | |
| 4 | Y | Y |
| 5 | Y | |
| 6 | Y | Y |
| 7 | Y | |
| 8 | Y | Y |
| 9 | Y | |
| 10 | Y | Y |
| 11 | Y | |
| 12 | Y | Y |
Tabella 2. Dimostrazione che solo le righe di numero pari sono selezionate
Per scegliere come target tutte le righe dispari, dovremmo comporre il seguente selettore:
Tr:nth-child(2n+1)
Questo selettore corrisponde alla prima riga all'interno di una tabella e ogni seconda riga dopo quella, tutte le righe dispari come mostrato nella Tabella 3.
| Quale elemento figlio viene selezionato? | |||
|---|---|---|---|
| Elemento figlio | Formule | ||
| n | 2n | 2n+1 | |
| 0 | n / a | n / a | |
| 1 | Y | Y | |
| 2 | Y | Y | |
| 3 | Y | Y | |
| 4 | Y | Y | |
| 5 | Y | Y | |
| 6 | Y | Y | |
| 7 | Y | Y | |
| 8 | Y | Y | |
| 9 | Y | Y | |
| 10 | Y | Y | |
| 11 | Y | Y | |
| 12 | Y | Y | |
Tabella 3. Dimostrazione che solo le righe dispari sono selezionate
Illustrazione delle strisce di zebra
La figura 1 mostra una tabella che elenca vari "supercibi" e le loro virtù nutrizionali come dimostrazione dello zebra striping.
Figura 1: Il tabella HTML
In questa dimostrazione, vogliamo colorare lo sfondo delle righe dispari in modo che la tabella sia più facile da leggere. Il blocco di dichiarazione è scritto come tale:
Tr:nth-child(2n+1) ( colore di sfondo: #99ff99; )
Questa regola corrisponde a tutte le righe dispari e applica il colore di sfondo solo a quella riga, come mostrato nella Figura 2.
Figura 2: solo le righe pari hanno uno stile
Se queste formule sono troppo complicate per essere ricordate, la proprietà nth-child consente a chi ha problemi di matematica di utilizzare scorciatoie per parole chiave. Invece di una formula matematica, possiamo anche utilizzare le parole chiave "dispari" o "pari" come valore:
Tr:nth-child( strano) (colore di sfondo: #99ff99; )
CSS3 ci fornisce una tecnica senza problemi per lo zebra-striping delle nostre tabelle, voci di elenco o moduli e così via.
Sfortunatamente, il selettore dell'ennesimo figlio gode di un supporto browser limitato. Al momento della stesura di questo articolo, il selettore dell'ennesimo figlio funziona in Safari 3 e Opera 9.5. Purtroppo, potresti voler attenerti al metodo di codifica CSS più inefficiente fino a quando il supporto per la proprietà non viene aggiornato in altri browser. O se vuoi supportare altri browser come Internet Explorer con un semplice metodo di striping zebrato, puoi "rattoppare" il supporto per l'ennesimo figlio in quei browser. Utilizzando un framework JavaScript come jQuery , puoi fornire una soluzione abilitata per JavaScript solo a IE mentre gli altri browser utilizzano le regole CSS per lo stile della pagina.
Esempio dal vivo della tavola dei superfoods
Se disponi di un browser che supporta nth-child , questa tabella HTML collegata sembrerà a strisce zebrate . Il CSS è inserito nella testata di questa pagina in modo da poter visualizzare facilmente il sorgente guardare cosa sta succedendo.
Succede che alcuni dei contenuti del nostro sito devono essere organizzati sotto forma di una tabella che conterrà determinate informazioni. Qual è il modo migliore per dare uno stile a questo tavolo in questo caso? Penso che abbastanza spesso tu abbia visto tavoli a forma di "zebra". Queste sono quelle tabelle le cui righe attraverso una sono dipinte in un determinato colore. Il vantaggio di tali tabelle è la loro leggibilità. Oggi ti dirò quanto è facile modellare una tabella in questo modo usando pseudo-classi.
1. Prima di tutto, dobbiamo creare un file html e in esso c'è la stessa tabella che modelleremo. Andiamo avanti con questo.
Creerò un documento html5, collegherò immediatamente un foglio di stile, che creeremo dentro passo successivo e creare una tabella nel corpo del documento.
Documento senza titolo
Ecco come apparirà il nostro tavolo ora se apriamo file html nel browser:
2. Ora è il momento di creare un file di foglio di stile "style.css" e iniziare a modellare la nostra tabella.
Crea questo file e salvalo nella stessa directory del file html. Se salvi in una directory diversa, non dimenticare di correggere il percorso del file quando lo includi in html.
Styling del tavolo zebrato
Per lo stile, useremo la pseudo-classe ":nth-child".
Il modo più semplice per definire lo stile delle righe pari e dispari in una tabella consiste nell'usare parole chiave"dispari" (elementi dispari dell'insieme) e "pari" (elementi pari dell'insieme).
Questo è fatto in modo molto semplice. Nel tuo file del foglio di stile, scrivi quanto segue:
tr:nth-child(dispari) (background-color:#CCC;) tr:nth-child(even) (background-color:#FFC;)
Puoi scegliere qualsiasi colore di sfondo. Tranne colore di sfondo Puoi anche impostare altre regole, come lo spessore del carattere, il tipo di carattere, ecc.
Di conseguenza, se aggiorni la pagina nel browser, vedrai quanto segue:
Come puoi vedere, tutte le linee dispari sono colorate colore grigio, e tutti pari in giallo chiaro.
3. Ma questo è solo uno dei più modi semplici usando la pseudo-classe ":nth-child".
Infatti, con il suo aiuto, possiamo selezionare elementi dello stesso gruppo in vari modi.
Cosa, ad esempio, se voglio, tra l'altro, dipingere tutte le righe della prima e dell'ultima cella di un certo colore, ma allo stesso tempo le mie due celle al centro dovrebbero rimanere a forma di "zebra" .
Anche questo è abbastanza facile da fare.
Prima di tutto, devo selezionare un elemento cell, quindi applicargli una pseudo-classe con i parametri appropriati tra parentesi.
Come questo:
tr td:nth-child(3n+1)(background-color:#069;)
Spieghiamo questo codice.
"3n" significa che selezioniamo ogni terza riga. E "+1" significa che il campione partirà dalla prima riga. Pertanto, verranno selezionate la prima riga e la terza successiva.
Nel nostro caso, abbiamo solo 4 righe nella tabella, quindi dentro Colore blu sarà dipinto solo il primo e ultime righe.
Se ci fossero più righe nella nostra tabella, la prima riga rientrerebbe nel campione e poi ogni terza riga.
Se scriviamo lo stesso codice, ma senza "+1":
tr td:nth-child(3n)(background-color:#069;)
Quindi il campione sarebbe completamente diverso. Selezioniamo semplicemente ogni terza riga e il risultato sarebbe questo:
Penso che ora un tale principio di selezione che utilizza la pseudo-classe ":nth-child" sia diventato più comprensibile per te.
Puoi modificare i parametri tra parentesi e quindi selezionare gli elementi a tuo piacimento. Ci vuole solo un po' di pratica qui.
Tuttavia, questo metodo è abbastanza conveniente perché non è necessario assegnare classi a ogni riga o colonna della tabella.
Quindi esercitati e divertiti!
Questo è tutto ciò che ho oggi.
Attendo un tuo feedback! Non dimenticare di condividere il tutorial con i tuoi amici utilizzando i pulsanti dei social media qui sotto.
Iscriviti agli aggiornamenti del blog e rimani aggiornato con gli articoli e le lezioni più interessanti e utili!
Anna Kotelnikova era con te.
Buona fortuna ea presto!
Una tabella zebra è una tabella in cui il colore di sfondo della riga cambia dopo ogni riga. Cioè, ad esempio, bianco-nero-bianco-nero ... Questo è ciò che faremo usando solo css.
Per creare una "zebra" nella tabella, puoi usare JS. Ma questo metodo sarà piuttosto problematico. Puoi creare una "zebra" manualmente, ovvero aggiungere manualmente classi al tag
Questa pseudo-classe è stata creata per aggiungere proprietà al tag sottostante un certo numero. È possibile impostare le proprietà in modo che vengano impostate solo su tag pari o dispari. Fondamentalmente, questa pseudo-classe può essere applicata esattamente a ciò che è nelle tabelle. Regole di scrittura:nth-child:
Selettore:nth-child(value) ( ... )
I valori possono essere:
strano– numeri dispari (1, 3, 5, 7…).
anche– numeri pari (2, 4, 5, 6…).
numero- qualsiasi numero da uno.
Ma questo metodo ha uno svantaggio: non è supportato nei browser meno recenti.
E per creare uno stile zebra nella tabella, devi fare quanto segue:
HTML
| N | Paese | Popolazione (migliaia di persone) |
|---|---|---|
| 1 | Cina | 1 338 613,0 |
| 2 | India | 1 166 079,2 |
| 3 | Stati Uniti d'America | 307 212.1 |
| 4 | Indonesia | 240 271.5 |
| 5 | Brasile | 198 739.3 |
L'attributo spaziatura celle determina di quanto fare un passo indietro tra le celle. 0 - annulla il riempimento.
css
tabella tr:nth-child(odd) ( background-color:#EDEDED; /* Background color */ )Con questo impostiamo che se il tag
Tabella, tr, td, th ( color:#969799; /* Colore del testo */ font:13pt Andale Mono, monospace; /* Dimensioni, tipo di carattere */ bordo:1px solido #E9E9E9; /* Tratto */ border-collapse :collapse; /* Rimuovi il doppio tratto tra le celle */ ) td, th ( padding:5px; /* Padding */ ) th ( font-weight:bold; background-color:#E5E5E5; /* Background color */ )
Se avessi sempre aderito al principio della ragionevole sufficienza, non leggeresti queste righe adesso. Questo sono io per il fatto che, sebbene l'argomento proposto sia abbastanza ben divulgato, e soluzioni esistenti Sono abbastanza soddisfatto, eppure non sono riusciti a portarmi in uno stato di completa tranquillità... in generale ho iniziato a reinventare la ruota.
Parleremo di tabelle HTML "a strisce", ad es. su tabelle con righe intercalate di stili diversi. In particolare, per migliorare la percezione dei dati, queste linee possono essere multicolori. Di seguito è riportato un esempio di tale tabella:
Mi sono posto la seguente sfida: senza modificare il file HTML:
| lancette | 30 tipi | scheletro cordato |
| pesce cartilagineo | 600 specie | scheletro cartilagineo |
| pesce ossuto | 20.000 specie | Scheletro |
| Anfibi | 3.000 specie | scheletro traforato |
| rettili | 6000 specie | scheletro solido |
| Uccelli | 8000 specie | scheletro solido |
| mammiferi | 4000 specie | scheletro solido |
Modo standard
Sul web, quando si cercano "tavoli rigati" o "tavoli zebrati", è facile trovare i materiali giusti sull'argomento. Di norma, le soluzioni proposte sono diverse varianti di un'idea: utilizzando JavaScript e DOM, troviamo le tabelle richieste nel documento HTML (class stripy) e aggiungiamo le classi necessarie (ad esempio dispari e pari) alle loro righe, a seconda se la riga è pari o meno. Può essere implementato in questo modo:
< tabs.length; e++) if (tabs[e].className == tabClass) { var rows = tabs[e].getElementsByTagName("tr"); for (var i = 0; i < rows.length; i++) // le righe sono numerate da 0 righe[i].className += ((i % 2) == 0 ? " oddrows" : " evenrows"); ) )
Associando questa chiamata di funzione all'evento onload della pagina, otterremo il risultato desiderato.
Forse oggi soluzione ottimale, tuttavia non lascia inalterato l'HTML. Mi interessava risolvere il problema esclusivamente con CSS, o almeno affidare a CSS il compito di trovare questi strumenti.
Soluzione ideale
È possibile risolvere il problema con CSS "puri"? È possibile se il browser supporta CSS3. Dopo aver studiato le specifiche, vi troviamo una nuova pseudo-classe :nth-child() , apparsa senza dubbio sotto l'influenza del soggetto, e grazie alla quale gli stili necessari sono impostati in modo molto semplice:
/* riga dispari della tabella delle classi a righe */.stripy tr:nth-child(2n+1)( ... ) /* riga pari della tabella delle classi a righe */.stripy tr:nth-child(2n)( ... )Ahimè, browser moderni la stragrande maggioranza non lo sostiene ancora. E CSS2? Qui, purtroppo, ci sono pochissimi strumenti adatti. Puoi risolvere parzialmente il problema utilizzando il selettore:
Maglia rigata ( ... ) /* 1a riga */.riga tr + tr ( ... ) /* 2a riga */.a righe m.a + m.a + m.a ( ... ) /* 3a riga */.a righe m.a + m.a + m.a + m.a ( ... ) /* 4a riga */.a righe m.a + m.a + m.a + m.a + m.a ( ... ) /* 5a riga */
tuttavia, questo metodo è adatto solo per tabelle con un numero di righe relativamente piccolo e noto e non è affatto conveniente. Cosa rimane? Resta da utilizzare le funzionalità aggiuntive di ogni singolo browser. Ho cercato di trovare una soluzione per le versioni Windows di Internet Explorer, Mozilla e Opera.
Internet Explorer
Non ci sono stati problemi con questo browser. Sfruttando la capacità di IE di impostare i valori alle proprietà CSS in modo dinamico utilizzando expression() , il problema dell'alternanza di linee multicolori, ad esempio, può essere facilmente risolto nel modo seguente:
Stripy tr( background: expression(this.rowIndex % 2 == 0 ? "#ffe" : "#efe"); )
Per definire con questo metodo non solo una proprietà, ma l'intero stile per le righe della tabella corrispondenti (aggiungi le classi oddrows e evenrows), il codice dovrà essere complicato, oppure dovrebbe essere utilizzata la tecnologia DHTML Behaviors:
Stripy tr( comportamento: url(stripy.htc); ) /* riga dispari *//* linea pari */
Nell'esempio sopra, il piano è implementato: alle stringhe vengono aggiunte le classi necessarie, a seconda che la stringa sia pari o meno. Questo comportamento del tag tr è descritto nel file stripy.htc:
stripy.htcLe tecnologie utilizzate sono state introdotte per la prima volta in Internet Explorer versione 5, quindi le tabelle con la classe stripy diventeranno zebre a partire da questa versione.
Geco
Un'estensione simile a DHTML Behaviors è implementata anche nei browser con il motore Gecko. Gli sviluppatori Web possono sia definire nuovi elementi sulla pagina sia sovrascrivere l'aspetto, il contenuto e il comportamento di quelli standard. XBL (XML Binding Language) viene utilizzato per questo. Questa tecnologia ha più capacità rispetto allo sviluppo di Microsoft e sembrava che non ci sarebbero state difficoltà nel risolvere il compito, ma non è stato così.
In CSS, l'associazione XBL è impostata come il comportamento con la proprietà -moz-binding:
Stripy tr( -moz-binding: url(stripy.xml); )
Restava da descrivere il comportamento nel file XBL stripy.xml tag desiderati, tuttavia, nonostante i miei migliori sforzi, non sono stato in grado di "ancorare" né il tag tr né altri tag della tabella. Bugzilla Bug 83830 si è rivelato essere la causa di questo problema: L'associazione delle celle TD (con XBL) non funziona affatto. Non importa quanto fosse offensivo, si è scoperto che XBL non doveva essere considerato. Fortunatamente, una soluzione è stata trovata!
L'aiuto è arrivato dal noto guru del web Dean Edwards, che ha creato un wrapper XBL che consente ai browser Gecko di utilizzare la tecnologia DHTML Behaviors di Microsoft, il che significa che puoi utilizzare lo stesso file stripy.htc di IE per risolvere il problema!
Per fare ciò, abbiamo bisogno di due file XBL: moz-behaviors.xml (il wrapper stesso, puoi prenderlo sul sito web di Dean Edwards, pesa meno di 7K) e bindings.xml (un file intermedio ausiliario "tra" CSS e moz-behaviors.xml , codice sotto nel testo). Ora, affinché il file .htc funzioni in Mozilla, è necessario quanto segue:
.stripy tr( -moz-binding: url(bindings.xml#stripy.htc); )In generale funziona tutto bene, ma non sarà comunque possibile modificare il comportamento del tag tr a causa del bug di cui sopra, ma il furbo Edwards è riuscito a risolvere anche questo problema. Nel nostro caso, il codice CSS dovrebbe essere integrato:
/* Riempimento necessario per associare correttamente i tag della tabella */.stripy( -moz-binding: url(bindings.xml#table); ) /* Comportamento HTC utilizzando l'associazione XBL */.stripy tr( -moz-binding: url(bindings.xml#stripy.htc); ) /* riga dispari */.stripy .oddrows( background:#ffe; ... ) /* linea pari */.stripy .evenrows( background:#efe; ... )Il contenuto del file bindings.xml dovrebbe essere il seguente:
binding.xmlOra funziona tutto alla grande. Le tabelle con la classe stripy diventeranno zebre nei browser basati sul motore Gecko a partire dalla versione 1.0.
musica lirica
Sfortunatamente, questo membro della famiglia di web explorer non ha gli stessi meccanismi di espansione della concorrenza. Sì, i widget sono apparsi nella nona versione, ma con il loro aiuto è impossibile influenzare in alcun modo il browser. Cosa fare? Opera non ha lasciato altra scelta che usare la tecnica proibita. A partire dalla 7a versione, il browser (così come IE, a partire dalla versione 5) aveva una "caratteristica" interessante: la possibilità di eseguire script direttamente dai CSS. Per fare ciò, usa qualsiasi proprietà CSS che ti permetta di specificare il percorso del file come valore. Ecco un esempio di tale tecnica:
Body( background-image: url("javascript: alert("Ciao");"); )
Opera esegue lo script solo su elementi HTML esistenti e solo una volta. Perché non approfittarne e prendere in prestito lo script di cui sopra? Ho fatto proprio così, anche se devo ammettere che c'erano alcune difficoltà con questa tecnica e non tutti gli scenari erano "obbedienti":
Funzione makeStripy(tabClass) ( var tabs = document.getElementsByTagName("table"); for (var e = 0; e< tabs.length; e++) if (tabs[e].className == tabClass) { var rows = tabs[e].getElementsByTagName("tr"); for (var i = 0; i < rows.length; i++) rows[i].className += ((i % 2) == 0 ? " oddrows" : " evenrows"); } } if (window.opera) makeStripy("stripy");
Questo script verrà eseguito correttamente in Opera e tramite CSS:
Stripy tr( background-image: url("javascript:function makeStripy(tabClass)(var tabs=document.getElementsByTagName("table");for (var e=0;e Nell'esempio sopra viene chiamata direttamente la funzione necessaria (grazie al controllo if (window.opera) ..., questo accade solo in Opera), oppure puoi associare questa chiamata all'evento onload della pagina, sono riuscito a raggiungere questo obiettivo come segue: Stripy tr( background-image: url("javascript:(function()(function makeStripy(tabClass)(var tabs=document.getElementsByTagName("table");for (var e=0;e Entrambe le opzioni funzioneranno su versioni di Opera che supportano la proprietà className dell'oggetto HTMLElement sull'elemento tr, ad es. dalla versione 7.5. Le tabelle con la classe stripy sono diventate "a strisce" con successo nella nona versione del browser, tuttavia, già nella build 8500, Opera perde la sua "capacità unica" - questo trucco non funziona più. Quindi, sembrava che la questione fosse già chiusa, per Opera resta per ora aperta. Quindi, non è stato possibile realizzare tutto quanto pianificato, ma, nonostante ciò, abbiamo, anche se non una soluzione completa, ma abbastanza soddisfacente. L'HTML rimane intatto e il file style.css potrebbe assomigliare a questo:Risultato
Articoli correlati in alto
