Web designer utilizzare caselle di scorrimento per visualizzare il contenuto in una pagina Web. Hanno luogo il contenuto in una scatola contenente una barra di scorrimento sul lato della scatola. I visitatori del sito scorrere il contenuto spostando la barra di scorrimento dall'alto verso il basso della scatola. Queste caselle di scorrimento a volte sono circondate da un bordo. Web designer può rimuovere o rendere invisibile il bordo modificando gli attributi di codice che crea la casella di scorrimento.
Istruzioni
1
Creare un nuovo elemento div. Questo div conterrà il contenuto che verrà visualizzato all'interno della vostra casella di scorrimento. Il seguente è un esempio di codice di creazione di div.
< div >< / div >
2
Posizionare il testo all'interno dell'elemento div — dopo il tag < div > e prima il < / div > tag. Nell'esempio seguente, il testo "Questo è il testo che verrà visualizzato all'interno della casella di scorrimento che non dispone di un bordo" viene visualizzato all'interno dell'elemento < div >.
< div > questo è il testo che verrà visualizzato all'interno della casella di scorrimento che non dispone di un bordo. < / div >
3
Applicare le proprietà di stile per il div. Queste regole saranno dettare l'aspetto dell'elemento div, creare una barra di scorrimento per l'overflow e definire il bordo della casella. Le proprietà di stile sono inserite all'interno di una regola di stile e assegnate all'apertura tag div. In questo esempio, le impostazioni di stile vengono applicate al campione div dall'esempio precedente. La scatola ha un'altezza di 50 pixel e una larghezza di 100 pixel e la proprietà overflow è impostata su "scorrere" — l'impostazione che rende la casella di una casella di scorrimento. La casella avrà uno sfondo giallo e carattere bianco. Infine, la scatola ha un bordo verde solido 10-pollici di larghezza.
< div style = "width: 100px; overflow: scroll, altezza: 50px; sfondo-colore: giallo, colore: bianco; border: 10px tinta verde;" > questo è il testo che verrà visualizzato all'interno della casella di scorrimento che non dispone di un bordo. < / div >
4
Crunch il confine fino a 0 pixel. Si consideri la seguente modifica al codice di esempio. Si noterà che l'impostazione di confine è cambiato da 10 pixel su 0 pixel, che consente di rimuovere completamente il bordo della casella di scorrimento.
< div style = "width: 100px; overflow: scroll, altezza: 50px; sfondo-colore: giallo, colore: bianco; border: 0px tinta verde;" > questo è il testo che verrà visualizzato all'interno della casella di scorrimento che non dispone di un bordo. < / div >
5
Il confine si fondono con lo sfondo — un altro metodo per liberarsi del bordo. Nell'esempio di codice riportato di seguito, il bordo è impostata a 10 pixel e ha cambiato il suo colore al bianco. Se il sito ha uno sfondo bianco, il bordo non verrà visualizzati.
< div style = "width: 100px; overflow: scroll, altezza: 50px; sfondo-colore: giallo, colore: bianco; border: 10px tinta bianco;" > questo è il testo che verrà visualizzato all'interno della casella di scorrimento che non dispone di un bordo. < / div >
6
Nascondere il bordo modificando l'attributo solido del bordo su hidden. Nell'esempio che segue, il confine è ancora 10 pixel di larghezza, ma ora è verde. Tuttavia, ha cambiato l'impostazione "tinta" su "hidden". Questa impostazione rende completamente invisibile il confine.
< div style = "width: 100px; overflow: scroll, altezza: 50px; sfondo-colore: giallo, colore: bianco; border: 10px nascosto verde;" > questo è il testo che verrà visualizzato all'interno della casella di scorrimento che non dispone di un bordo. < / div >