June 16
La maggior parte dei siti web di scorrere in senso verticale, accumulando pezzi di contenuto su come i piani in un edificio. Di tanto in tanto, un design a scorrimento orizzontale - o un sito web panoramico - è adatto meglio visualizzare il contenuto. Questo tipo di progettazione sta diventando sempre più utile come tablet PC, che di solito caratterizzano le interfacce touchscreen che lo rendono facile per scorrere in orizzontale, diventare più popolare. gallerie fotografiche e portafogli di design spesso utilizzano un design panoramico. È possibile ottenere questo tipo di disegno facilmente usando solo codice HTML e CSS.
1 Aprire un nuovo file nel vostro editor di testo.
2 Inserire il seguente codice HTML standard:
<Html>
<Head>
<Title> panoramica Sito web di test </ title>
<Style>
</ Style>
</ Head>
<Body>
</ Body>
</ Html>
3 Creare un elemento di "contenitore" all'interno del <style> </ style> tag e definire la sua larghezza, l'altezza, la posizione e il tipo di visualizzazione. Il codice dovrebbe essere simile a questa:
.container {
width: 100%;
height: 100%;
position: absolute;
top: 0;
left: 0;
display: table; }
4 Creare un elemento "new-content" all'interno del <style> </ style> tag e definirne il tipo di visualizzazione e allineamento verticale. Questo è l'elemento che alla fine contiene contenuti del tuo sito web. È possibile modificare lo stile di questo elemento per soddisfare qualsiasi tipo di contenuto che si sta producendo.
Il codice dovrebbe essere simile a questa:
.new-post {
display: table-cell;
vertical-align: middle; }
5 Aggiungere un'istanza dell'elemento "contenitore" e l'elemento "new-content" nella sezione <body> </ body>. L'elemento "new-content" dovrebbe andare all'interno dell'elemento "contenitore". Il codice dovrebbe essere simile a questa:
<Div class = "contenitore">
<Div class = "new-content">
</ Div>
</ Div>
6 Aggiungere il contenuto del tuo sito web per l'elemento "new-contenuti". Per esempio, se si sta creando una galleria fotografica, è possibile utilizzare il seguente codice all'interno dell'elemento "new-content":
<Img />
<P> Foto didascalia </ p>
Per inserire un'altra immagine, è sufficiente aggiungere un'altra istanza dell'elemento "nuovi-contenuti".
7 Salvare il file con estensione .html e aprirlo in un browser web per vedere i risultati.