Ciao a tutti.
Bentornato.
Dal momento che è la quarta settimana e
stai lavorando al tuo progetto finale, quello che voglio fare è mostrarti
alcune delle diverse opzioni che puoi usare quando stai disegnando le tue pagine.
E in questo video,
voglio mostrarti cosa succede quando provi a creare una barra di navigazione verticale.
Quindi qui nel mio browser,
ho come la pagina sarà simile quando abbiamo finito.
Ma andiamo avanti e premerò aggiornamento e prima vediamo come sarebbe
se provassi a creare una barra di navigazione usando quattro semplici collegamenti.
Ancora una volta, i collegamenti sono in linea, quindi vanno uno accanto all'altro.
Non c'è colore.
Non sta succedendo niente.
Ed e' davvero orribile.
Quindi fammi rimettere in questo stile.
Aggiornare la pagina.
E vi mostrerò come ho creato questa barra di navigazione.
Iniziamo parlando del corpo.
Ho appena messo un po 'di colore di sfondo, padding e margine.
Non e' molto importante qui.
L' importante è parlare della nostra sezione di navigazione.
Una delle cose che volevo fare è mostrarvi l'idea di
usare quella scatola di dimensioni.
Quello che sta per fare è che toglie la necessità
per voi di contare quanta larghezza, quanta imbottitura, quanta confine.
Non devi fare i conti.
Il browser lo farà per te.
Ho messo in un semplice bordo, colore, colore di sfondo, ecc
La prima cosa che ho fatto, però, è che ho fatto in linea blocco,
perché voglio che la mia navigazione sia accanto alle altre parti della mia pagina.
E dal momento che nav è blocco, non succederà a meno che non lo butti lì dentro.
Così ho detto che volevo che fosse circa il 20% della pagina e poi aggiunto un margine.
Ora, qualcosa di nuovo che potresti non aver visto prima è questa idea di altezza
uguale a 100vh.
Questa è l'altezza del tuo viewport.
Quindi questo significa che voglio che la navigazione occupi l'intera altezza della tua pagina.
Non lo sto rivestendo a 400 pixel o 200 pixel
, perché non so quanto sia grande lo schermo che stai guardando.
Quindi, parliamo delle lunghezze effettive stesse.
Quello che ho fatto è che ho portato via i collegamenti noiosi regolari e
li ho davvero in stile per renderli qualcosa di un po 'più originale.
Quindi ho messo un'altezza di quanto in alto voglio che ognuno dei miei collegamenti sia.
E poi ho messo un piccolo trucco e
ho detto che voglio che l'altezza della linea sia di 45 pixel.
Allora perche' dovrei farlo?
Il motivo sarebbe che voglio centrare le foto di casa o
voglio centrare le parole al suo interno ed è così che posso farlo.
Il prossimo tipo di cosa interessante che ho fatto è che ho aggiunto un'immagine di sfondo.
Ho aggiunto queste frecce.
E la cosa bella che ho dovuto fare che voglio davvero farti notare è che
non potevo semplicemente collegarmi alla cartella e poi al file.
A causa del modo in cui ho impostato il mio codice, prima devo dire, oh, so di essere nella
cartella CSS in questo momento, quindi tornerò alla mia cartella principale e poi troverò le immagini.
Se questo ti confonde, non preoccuparti.
Si tratta di un concetto nuovo di zecca, ma è qualcosa che molti di voi stanno per
incontrare mentre si tenta di collegare le immagini dal foglio di stile.
Va bene.
L' ultima cosa che ho fatto è stata aggiungere un po 'di imbottitura, quindi c'è spazio per
l'immagine, e poi aggiungere un po 'di margine.
Quindi, usando queste diverse cose di cui abbiamo già parlato, posizione, scusa,
visualizzazione, altezza della linea, URL di sfondo, siamo stati in grado di fare qualcosa
che penso sembra davvero bello per una semplice barra di navigazione verticale.
Vai avanti e provalo.
Buona fortuna.