Come mettere un codice in una casella di scorrimento con i CSS

February 24

Come mettere un codice in una casella di scorrimento con i CSS


La possibilità di aggiungere automaticamente una casella di scorrimento per il vostro codice di programmazione è utile quando si esegue un sito di programmazione tutorial. Una casella di scorrimento mette in evidenza la parte di codice del vostro tutorial, e permette a chiunque di copiare e incollare il codice per il proprio uso. È possibile definire una classe in CSS per aggiungere questa funzionalità. L'aggiunta di un semplice tag pagina HTML posizionerà automaticamente il codice in una scatola e creare un formato tutorial di facile utilizzo per i visitatori del sito.

istruzione

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

2 Passare alla modalità HTML e aggiungere il seguente CSS all'interno della sezione <head>:

<Style type = "text / css">

.scrollBox {

font-family: Courier;

font-size: 14px;

line-height: 18px;

height: 200px;

width: 500px;

padding: 10px;

background-color: # 000;

color: # 008.023;

overflow: auto;

}

</ Style>

Modificare il codice per l'altezza casella di scorrimento e la larghezza desiderate, e specificare gli stili per altri elementi come la dimensione del carattere, il tipo e il colore, così come il colore di scorrimento scatola di sfondo.

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

<Div class = "ScrollBox">

Funzione HelloWorld ()

{

alert ( "Ciao Mondo!");

}

</ Div>

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

Consigli e avvertenze

  • Le barre di scorrimento appaiono solo se il testo all'interno della casella è più lungo rispetto alla zona assegnata per esso. Per rendere il rotolo appaiono barre, regolare la larghezza e l'altezza utilizzando il codice CSS.

Articoli Correlati