Grafici di confronto sono un modo pulito ed elegante per presentare le informazioni su un servizio, prodotto o piano che consente allo spettatore di prendere decisioni o acquisti rapidamente. Oggi, il tag HTML5 possono essere utilizzati in combinazione con elenchi e div (tag < div >) anziché utilizzare tabelle, che hanno una struttura più rigida e statica. Classi CSS vengono utilizzate per determinare la posizione di ogni elemento DIV e lista e per le intestazioni e i valori di stile. C'è una varietà di modi per creare un grafico di confronto utilizzando CSS e nessuno di loro è migliore o peggiore di un'altra. Tuttavia, se si desidera che ogni colonna per essere interattivo, il metodo più efficace è da utilizzare in stile div.
Istruzioni
1
Aprite il vostro editor HTML e creare un nuovo file denominato "chart.html." Questo file conterrà la struttura e il contenuto del tuo grafico di confronto. Creare un secondo file di nuovo e lo chiamano "Style. css". Questo file conterrà il CSS che controlla il design e l'aspetto del grafico. Questo codice può essere successivamente aggiunto al foglio di stile principale del tuo sito Web o tenuto separato. Spetta a voi. Salvare entrambi i file in una nuova cartella come "mychart."
2
Rimuovere eventuale contenuto dal documento HTML che può essere stati aggiunti da editor. Immettere il codice seguente per creare un'intestazione di HTML5 per il documento:
<! doctype html >
< html >
< head >
< meta charset = "UTF-8" / >
< title > il tuo titolo < / title >
< link href="style.css" rel = "stylesheet" type = "text/css" / >
< / head >
Sostituire "Your Title" con il titolo del grafico desiderato e verificare il percorso al vostro style. CSS che sia corretto.
3
Inserire un tag di apertura "< body >". Sotto di essa, inserire i tag di apertura per iniziare la prima colonna. Negli esempi seguenti utilizzano i tag di HTML5 "articolo" e "intestazione" per definire ogni colonna come una parte separata del contenuto.
< div id = "grafico" >
< articolo >
<header>
<h1>Option One</h1>
</header>
<section>
Sostituire "Option One" con il nome del titolo desiderato, che potrebbe essere qualcosa come "Piano base" o "Concorrente".
4
Inserire il codice HTML per il tuo elenco di opzioni o valori. Avrete bisogno abbastanza righe per accogliere i valori massimi, anche se non vengono utilizzati in ogni colonna, ad esempio, se "opzione 1" ha soltanto quattro benefici o valori, ma "L'opzione 3" ha dieci, avrete bisogno di almeno dieci righe. Questa operazione viene eseguita utilizzando un elenco non ordinato:
< ul >
< li > beneficio 1 </li >
< li >< div class = "controlla" >< / div >< / li >
</UL >
Si sarebbe semplicemente duplicare il "< li > beneficio 1 </li >" tante volte quanto necessario, modifica il contenuto in modo appropriato. Contenuti possono essere testo, link o immagini. Per evitare la duplicazione di tag immagine, utilizzare una classe DIV con uno sfondo in stile invece, come nel secondo esempio. Sarà necessario chiudere la sezione a questo punto inserendo il tag "< / sezione >".
5
Inserisci il tuo codice di piè di pagina sotto la sezione chiusa. Il piè di pagina è un posto adatto per mettere il tuo prezzo, un'istruzione select o pulsante "Compralo subito" o entrambi. Utilizzando il tag "piè di pagina" è una scorciatoia in HTML5 che evita la creazione di una classe contenitore speciale e invece ti permette di creare uno stile uniforme che può essere applicato a ogni "piè di pagina" di ogni colonna. Per esempio:
< piè di pagina >
<div class="price">
< p >< forte >$ 45 < / strong >< / p >
<p><a class="button" href="#">Buy Now</a></p>
</div>
< / piè di pagina >
Chiudere la colonna aggiungendo il tag "< / articolo >" dopo "< / piè di pagina >."
6
Copiare la sezione dell'intero articolo, cominciando con "< articolo >," e incollare sotto "< / articolo >" per creare colonne aggiuntive. Numeri dispari funzionano meglio se si intende sottolineare una colonna specifica. Dopo aver aggiunto il numero desiderato, aggiungere i tag di chiusura per il grafico DIV, il corpo e il documento:
< / div >
< / body >
< / html >
7
Creare stili per gli elementi di base come link, tag di intestazione, paragrafi e il pulsante, se utilizzato. Testare il documento HTML nel browser durante il processo per vedere gli effetti delle vostre scelte di stile e regolare come necessario. Aggiungere gli stili per il vostro inizio di grafico con la classe "chart". Questa classe influenzerà tutto di sotto di esso, quindi questo è un luogo appropriato per definire i tipi di carattere, colori e la larghezza complessiva del grafico. Nell'esempio seguente si presuppone che il grafico verrà inserito in una pagina di interi:
grafico
{
font-family: Arial, sans-serif;
font-size: 12px;
Color: #333333;
Larghezza: 960px;
Imbottitura: 40px 0; Lo spazio tra il contenuto del grafico e confine di area di contenuto della pagina.
margin: 0 auto; Centra il grafico nella pagina.
chiaro: entrambi; Assicura che il grafico sia sulla propria riga se ci sono altri DIVs che è venuto prima di esso nella pagina.
}
8
Creare uno stile per il tuo articolo, o colonne di tabella. Per ottenere ogni colonna per sedersi uno accanto a altro, è necessario utilizzare "float: left." Il resto dello stile dipende da voi. Nell'esempio seguente, ogni articolo sarà dato il colore di sfondo predefinito stesso e un bordo.
articolo di grafico
{
float: left;
margin: 0;
colore di sfondo: #ffffff;
border: 1px solid #e5e5e5;
}
9
Ripetere questa procedura per aggiungere stili di intestazione, piè di pagina e sezione. Lo stile dell'intestazione deve definire almeno un'altezza e una posizione di "parente". Il piè di pagina deve definire un allineamento "min-height" e il testo del "centro". Per distribuire contenuto colonna uniformemente attraverso il grafico, non definire larghezze. Per esempio:
intestazione di tabella
{
altezza minima: 101px;
Posizione: relativo;
background: #373737 URL(".. / images/headerbg.jpg ") 0 0 repeat-x;
border-bottom: 1px solid #363636;
}
piè di pagina grafico
{
border-top: 1px solid #f5f5f5;
border-left: 1px solid #B0B0B0\9;
altezza minima: 70px;
text-align: center;
Priorità bassa: #C4C4C4 URL(".. / images/footerbg.jpg ") 0 0 repeat-x;
}
10
Stile elenco gli elementi "li". Questi elementi dovrebbero almeno avere imbottitura e un valore di altezza:
grafico ul li
{
Imbottitura: 13px 0;
altezza minima: 24px;
}
11
A seguito di stili individuali, immettere una classe combinata per definire gli stili condivisi da tutti gli elementi contenitore. Il valore più importante è "display: block", che permette l'intero elemento di prendere un'azione piuttosto che solo il testo all'interno. Per esempio:
articolo grafico, sezione del grafico, grafico intestazione, piè di pagina grafico, grafico div, grafico p, ul grafico, grafico tasto
{
display: block;
padding: 0;
margin: 0;
stile elenco: none! important;
contorno: nessuno;
}
Consigli & Avvertenze
- Evidenziare un determinato servizio o prodotto creando una classe articolo speciale che utilizza-ombre, bordi, effetti hover o testo in grassetto. Quando la classe viene applicata a un tag articolo, gli stili associati aggiungerà enfasi all'elemento che può influenzare le decisioni di acquisto.
- Creare classi per visualizzare icone speciali accanto alle voci di elenco, dove la classe viene utilizzata, ad esempio "#chart ul li.star" o "#chart ul li.checked." Assegnare ogni classe speciale un'immagine di sfondo con un allineamento a sinistra e aggiungere spaziatura interna per mantenere il testo sovrapposto.