La capacità di aggiungere automaticamente una casella di scorrimento per codice di programmazione è utile quando si esegue un sito di tutorial programmazione. Una casella di scorrimento evidenzia la parte di codice dei tuoi tutorial e consente a chiunque di copiare e incollare il codice per uso proprio. È possibile definire una classe CSS per aggiungere questa funzionalità. L'aggiunta di un semplice tag alla pagina HTML automaticamente inserire codice in una casella e creare un formato tutorial user-friendly per i visitatori del sito.

Istruzioni

1

Aprire una pagina Web contenente il codice utilizzando un editor HTML.

2

Passare alla modalità HTML e aggiungere il seguente codice CSS nella sezione < head >:

< style type = "text/css" >

.scrollBox () {

font-family: Courier;

font-size: 14px;

linea-altezza: 18px;

Altezza: 200px;

Larghezza: 500px;

padding: 10px;

background-color: #000;

colore: #008023;

overflow: auto;

}

< / stile >

Modificare il codice per la vostra altezza della casella di scorrimento desiderata e la larghezza e specificare gli stili per altri elementi, quali dimensione, tipo e colore, nonché il colore di sfondo di casella di scorrimento.

3

Racchiudere il codice all'interno dei tag < div > utilizzando lo stile ".scrollBox". Ad esempio, qui è un codice in JavaScript racchiuso tra tag < div >:

< div class = "scrollBox" >

HelloWorld () funzione

{

Alert ("Ciao mondo!");

}

< / div >

4

Salvare la pagina e aprirlo nel browser per visualizzare la casella di scorrimento.

Consigli & Avvertenze

• Le barre di scorrimento vengono visualizzate solo se il testo all'interno della casella è più l'area assegnata per esso. Per visualizzare le barre di scorrimento, regolare la larghezza e l'altezza utilizzando il codice CSS.