Pagine Web, come documenti cartacei nelle culture più occidentali, sono tradizionalmente orientate verticalmente: contenuto che non rientra nella pagina si estende verso il basso. Cascading codice di foglio di stile (CSS), tuttavia, è abbastanza versatile, ed è possibile forzare il contenuto in eccesso della tua pagina per estendere a destra invece. Sopprimere la barra utilizzando la proprietà di "overflow-y" scorrimento verticale e utilizzare la proprietà di "spazio" per impedire che contenuti che scorre verso il basso. Montare un'immagine di sfondo per l'altezza della finestra del browser per completare il modello di sito Web orizzontale.

Istruzioni

1

Aggiungere il seguente codice tra i tag di "head" del documento HTML:

< style type = "text/css" >

corpo () {

overflow-y: nascosto;

white-space: nowrap;

}

< / stile >

2

Scrivere un paragrafo abbastanza a lungo per estendere oltre il bordo destro della pagina nel corpo del documento HTML. Salvare la pagina e caricarlo in un browser Web. Si noti che il contenuto non va a capo, ma si estende orizzontalmente quanto necessario.

3

Partizione dello spazio orizzontale utilizzando elementi span con la loro proprietà di "visualizzare" impostata su "inline-block." Ad esempio, aggiungere la seguente definizione di classe per il codice CSS nella sezione "head":

.Partition () {

Larghezza: 500px;

display: inline-block;

Vertical-align: top;

bianco-spazio: normale;

}

La larghezza delle partizioni orizzontali deve essere specificata manualmente dal bordo del browser non provoca avvolgimento. La proprietà di "spazio bianco" avrebbe ereditata dal corpo per impostazione predefinita, quindi esso è sottoposto a override per avvolgere testo e contenuto all'interno di ogni partizione. Aggiungere elementi di "span" assegnati alla classe "partizione" per il corpo del documento, inserire contenuti per essere raggruppate all'interno di ciascuna. Ricorda che se un intervallo di "partizione" contiene più contenuti che possono rientrare in esso, che il contenuto sarà estendere fuori dalla parte inferiore della finestra ed essere inaccessibile.

4

Aggiungere le seguenti righe al blocco "corpo" nel codice CSS, sostituendo "background. jpg" con il nome del file dell'immagine per aggiungere un'immagine di sfondo viene ridimensionata in base all'altezza della finestra del browser:

background-image:URL('background.jpg');

sfondo-dimensioni: contengono;

Consigli & Avvertenze

• Aggiungere il seguente tag all'inizio del documento HTML per garantire la compatibilità con Internet Explorer:
• <! DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 / / EN" "l'http://www.w3.org/TR/html4/strict.dtd" >