Fare un banner è una parte fondamentale del web design. Molte volte i progettisti primi utilizzano le tabelle per creare il layout banner e sito web. Tuttavia, utilizzando i CSS è possibile definire lo sfondo, i colori, le dimensioni e le frontiere del banner. Tabelle fare un disegno difficile da gestire nel tempo, mentre i CSS ti permette di cambiare gli elementi in base alle esigenze. Avete bisogno di una conoscenza di base di HTML per raggiungere questo po 'di scripting. Mentre ci sono molti modi per creare un banner con i CSS, in questo tutorial creeremo uno striscione di due toni centrato con il testo che viene allineato a destra.

istruzione

1 Aprire il file html. Dopo il tag BODY messo in tag DIV e dare il DIV un tag ID. Chiamare il banner ID
<Div id = "banner"> </ div>.

2 Digitare il testo del banner tra i tag DIV appena create, <div id = "banner"> il tuo sito web </ div>. Encase prova in tag H1, <div id = "banner"> <h1> Il tuo sito web </ h1> </ div>. Questo renderà il testo più grande di dimensioni predefinite di oltre quattro punti.

3 Aprire il file CSS. Impostare lo stile per il banner digitando:

bandiera {}. Il #banner dirà i browser che cercano lo stile di id = "banner" che questo è per un tag ID e prende il nome banner.

4 Tra il {} è necessario digitare negli stili. Ci sono molti stili in CSS. Useremo solo alcuni stili. In primo luogo vogliamo centrare il banner sulla pagina.

bandiera {margin: 0 auto;}

Questo utilizza i margini per centrare il sito web con auto e azzerare i margini superiore e inferiore.

5 Aggiungere gli altri stili.

bandiera {margin: 0 auto

ANDARE
Larghezza: 780px
ANDARE
Altezza: 300px
ANDARE
Border: # ff0000 10px solido
ANDARE
Background: #ffffff
ANDARE
Color: # ff0000
ANDARE
Font-size: 18px
ANDARE
Text-align: right
ANDARE
Padding-right: 10px;}

Larghezza ed altezza definiscono le dimensioni del banner. Il confine è una linea di dieci pixel solido attorno alla scatola. Sarà rosso come definito dal codice esadecimale, cioè, l'# seguito dai sei lettere e numeri dopo di esso. Lo sfondo è impostato su bianco. Colore definisce il colore del testo, che è ancora rossa, per abbinare il confine. Font-size definisce la dimensione del testo. Text-align posiziona il testo. In questo caso abbiamo posizionato il testo alla destra della casella. Padding crea spazio tra il contenuto, ad esempio testo, all'interno del banner e il bordo del banner. Padding-right è impostato per dare 10px di spazio tra il testo e il bordo destro.

6 Salvare i file.

Consigli e avvertenze

• Per cambiare i colori, usare il selettore colore per scegliere un colore sullo schermo. Il selettore colore ti mostrerà il codice esadecimale per quel colore.