September 11
pagine Web, come i documenti cartacei nella maggior parte delle culture occidentali, sono tradizionalmente orientati verticalmente: contenuti che non si adatta alla pagina si estende verso il basso. Cascading Style Sheet (CSS) del codice, tuttavia, è molto versatile, e si può forzare il contenuto in eccesso della pagina per estendere verso destra, invece. Sopprimere la barra di scorrimento verticale utilizzando la proprietà "overflow-y" e utilizzare la proprietà "white-space" per evitare che il contenuto di fluire verso il basso. Montare un'immagine di sfondo per l'altezza della finestra del browser per completare il vostro modello di sito web orizzontale.
1 Aggiungere il seguente codice tra i tag "testa" del documento HTML:
<Style type = "text / css">
corpo{
trabocco-y: hidden;
white-space: nowrap;
}
</ Style>
2 Scrivi un paragrafo abbastanza a lungo per estendersi 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 avvolgere, ma si estende orizzontalmente per quanto necessario.
3 Partizionare lo spazio orizzontale con elementi span con i loro beni "visualizzazione" impostato su "inline-block". Ad esempio, aggiungere la seguente definizione di classe per il codice CSS nella sezione "testa":
.partizione{
width: 500px;
display: inline-block;
vertical-align: top;
white-space: normal;
}
La larghezza delle partizioni orizzontali deve essere specificato manualmente dal bordo del browser non causa più avvolgente. La proprietà "white-space" sarebbe stato ereditato dal corpo di default, quindi viene sostituito, al fine di disporre il testo e il contenuto all'interno di ogni partizione. Aggiungere elementi "span" assegnati alla classe "partizione" al corpo del documento, mettendo contenuti per essere raggruppati all'interno di ogni. Ricordate che se un "partizione" arco contiene più contenuti di quanto può andare bene in esso, che il contenuto si estende al largo della parte inferiore della finestra ed essere inaccessibile.
4 Aggiungere le seguenti righe al blocco di "corpo" nel codice CSS, sostituendo "background.jpg" con il nome della tua immagine per aggiungere un'immagine di sfondo che è dimensionato per l'altezza della finestra del browser:
background-image: URL ( 'background.jpg');
background-size: contenere;