Codici HTML Scroll Box

September 11

Creazione di una casella di scorrimento con HTML e CSS codice può essere un buon modo per aggiungere una grande quantità di informazioni al tuo sito web, pur avendo ci vuole una piccola quantità di spazio nel layout del tuo sito web. scatole di scorrimento fanno uso del tag <div> come un contenitore.

Codice di base

Il codice di base per un casella di scorrimento HTML utilizza in linea stile CSS per determinare le dimensioni della scatola, così come il modo in cui il contenuto deve scorrere.

<Div style = "height: 100px; width: 100px; overflow: auto;"> Il tuo contenuto qui </ div>

Modificare i valori di altezza e larghezza in modo che corrisponda alla dimensione desiderata della scatola. L'impostazione della proprietà "troppo pieno" per un valore di "auto" causerà una barra di scorrimento a comparire quando il contenuto sorpassa la scatola.

Configurazione avanzata

Regolare l'aspetto del box incorporando stili CSS aggiuntive in esso. È possibile cambiare lo sfondo ei bordi della scatola, così come il tipo di font, dimensione e colore del testo all'interno di esso. Ad esempio, il seguente codice produrrà una casella di scorrimento con testo bianco su sfondo nero, circondato da un bordo punteggiato rosso di spessore.

<Div style = "height: 100px; width: 100px; overflow: auto; background: # 000000; color: #FFFFFF; border: 5px tratteggiato # FF0000;"> Il tuo contenuto qui </ div>

usi

scatole di scorrimento può contenere immagini e testo. Utilizzare le caselle di scorrimento piccoli per contenere piccole quantità di contenuto, come esempi di codice o elenchi brevi; incorporare scatole di scorrimento più grandi nel layout del tuo sito web per tenere lunghi blocchi di testo o di altri grandi quantità di contenuti.

avvertimento

Utilizzare le caselle di scorrimento con parsimonia e solo quando è necessario. Posizionamento di grandi quantità di contenuti in scatole di scorrimento molto piccole potrebbe comportare il contenuto essere quasi illeggibile. Questo può vanificare i visitatori e li inducono a cercare altrove per il genere di informazioni che il sito fornisce.