Come creare box in html. In questo articolo PCWEBNEWS propone dei “box” da utilizzare e modificare liberamente in qualsiasi sito o blog
Questo articolo non propone una lezione per creare box in html, ma mette, semplicemente, a disposizione alcuni esempi
Box 1
<div style="height:100px;width:590px;background-color:#FDBCB7;margin:0 auto; border-radius:50px;"><div align="center"> TESTO e/o contenuto multimediale</div></div>
Impostando valori uguali per altezza e larghezza (es.: height:200px;width:200px;) e la metà per il bordo (es.: border-radius:100px;) si otterrà un cerchio
Box 2
TXT prova2
TXT prova3
1
2
3
4
5
<div style="width:577px;height:100px;line-height:1,5em;overflow:scroll;padding:5px;background-color:#D2B48C;color:#993300;border:1px solid #908435;"> TXT prova1 TXT prova2 TXT prova3 1 2 3 4 5 </div>
Box 3
TESTO e/o contenuto multimediale |
TESTO e/o contenuto multimediale |
<center> <table border=1 width=98% cellspacing=0 cellpadding=15 cols=2> <tr> <td> <p align="left">TESTO e/o contenuto multimediale;/p> </td> <td> <p align="left">TESTO e/o contenuto multimediale;/p> </td> </tr> </table> </center>
Box 4
<fieldset style="background: #EEFFFF; border: 1px solid #000000; width: 590px; padding:1px;"> <legend style="color: #003366; font: italic bold 1em Arial, Helvetica, Sans-serif">TITOLO DEL BOX</legend> ... INSERIRE TESTO E/O CONTENUTI MULTIMEDIALI, OPPURE CONTENUTI IN HTML ... </fieldset>
Box 5
<fieldset style="border-bottom: #000000 1px solid; border-left: #000000 1px solid; padding-bottom: 5px; padding-left: 5px; width: 590px; padding-right: 5px; background: #CADABA; border-top: #000000 1px solid; border-right: #000000 1px solid; padding-top: 5px"><legend style="color: #FF0000;"><strong>TITOLO DEL BOX</strong></legend> <ul> <img src="URL IMMAGINE" width="100" height="85" alt="Box testo" title="Box testo" align="right" style="border: 0px solid #800000"> <li>Riga 1</li> <li>Riga 2</li> <li>Riga 3</li> <li>Riga 4</li> <li>Riga 5</li> <li>Riga 6</li> <li>Riga 7</li> </ul> <div align="right"><span style="font-size: 10px">Link esterno </span><a href="http://pcwebnews.altervista.org/" target="_blank"><span style="font-size: 12px">PCWEBNEWS</span></a></div></fieldset>
Box 6
<div style="width:250px;padding:0px; filter:shadow"><div style="width:570px;text-align:center;padding:10px;background-color:#E0EEEE; border:1px solid black;font-size:12px;color:#7B1B02;">TESTO 0123456789 TESTO.</div></div>
Box 7
<div style="width:590px; border:1px solid #FFF; background-color:#FFEC8E">TESTO 1234567890</div>
Ripetendo piu volte lo stesso codice si ottiene un risultato come quello mostrato nell’esempio (magari cambiando il codice del colore)
Box 8
TESTO TESTO TESTO TESTO TESTO TESTO TESTO TESTO TESTO TESTO TESTO TESTO TESTO TESTO TESTO TESTO TESTO TESTO TESTO TESTO TESTO TESTO TESTO TESTO TESTO TESTO
<p style="height:200px;width:100%;overflow:scroll;background:url(URL IMMAGINE) repeat fixed;">TESTO TESTO TESTO TESTO TESTO TESTO TESTO TESTO TESTO TESTO TESTO TESTO TESTO TESTO TESTO TESTO TESTO TESTO TESTO TESTO TESTO TESTO TESTO TESTO TESTO TESTO </p>
Per lo sfondo è stata utilizzata una sola immagine delle dimensioni di 100x90px, ma è possibile utilizzare qualunque dimensione
Box 9
<div style="background-color:#abcdef;width:590px;height:90px;"> <div align="center">TESTO 1234567890 TESTO</div></div>
In questo articolo “Creare box in html“ vengono spesso utilizzati dei codici esadecimali per definire i colori,
potete trovare un elenco a questo undirizzo
Se questo articolo vi piace cliccate sul pulsante FaceBook posto all’inizio di questa pagina