In questo video creeremo da zero il sito del portfolio di questo fotografo.
E di solito ti chiedo di tentare di farlo da solo e poi di darti un video di soluzione
seguendo questo.
Comunque questa volta è un codice deliberato lungo.
Quindi mi piacerebbe che tu tentassi di codificare e se preferisci puoi guardarlo una volta e poi programmare
la prossima volta.
Ma l'obiettivo qui è che lo faremo insieme e ci sono altre due cose che vogliamo uscire
da questo.
Il primo è che c'è una nuova proprietà che mostrerò float e la seconda cosa è che voglio solo farti
una piccola esperienza costruendo qualcosa di cui puoi essere un po 'orgoglioso.
Sembra un po 'meglio di alcune delle cose semplici che sono solo colori davvero sgargianti
che abbiamo fatto finora.
Quindi questo è un blog fotografico davvero minimale che faremo.
Quindi iniziamo.
Apri sublime.
Ho un singolo file chiamato Photo grid che HMO.
Per prima cosa ti mostrerò l'immagine o con cui stiamo lavorando.
Quindi queste sono immagini nove immagini tre immagini ciascuna da tre diversi fotografi che ho trovato
su Flickr.
Tutte le foto sono sotto licenza Creative Commons.
Puoi la licenza qui.
rapida dimostrazione in modo che tu possa Devo codificare insieme a questa parte quando aggiungo a quella di
uno che dice ciao e uno che dice addio e li salverò e poi aggiungerò il mio foglio di
stile in cui sto chiamando le foto del SS e poi qui ho intenzione di modellare i miei div.
Quindi, prima di fare qualsiasi cosa con questi tuoi URL, in realtà mi sbarazzerò di loro e aggiungerò il mio
vecchio scheletro ad-Din nel blog fotografico e farò una
Quindi, in realtà, darò loro un I. D. chiamalo solo uno.
E ancora questo è solo per dimostrare qualcosa e poi a un punto qui selezionerò uno e due e tutto quello che farò è semplicemente
dare loro un colore di sfondo
diverso rosso e poi il colore di sfondo viola e poi io sono andando a dare ad entrambi tutti i div e una larghezza
di 100 pixel.
Quindi quando lo faccio lo apro nel browser.
Abbiamo due div uno dopo l'altro.
Ricorda che se ispezioniamo.
Fondamentalmente sono impostati in modo che prendano la propria linea il loro elemento a livello di blocco.
Quindi, se non voglio che ciò accada, che è ciò che faremo per la griglia dell'immagine, vogliamo che le
nostre immagini formino una griglia o che più siano sulla stessa linea.
E se è così, se voglio farlo con i div, devo usare una proprietà chiamata float o è
un modo in cui posso realizzarla.
Quindi qui tutto ciò che faccio è galleggiare sicuro a sinistra e cosa farà.
Prenderà gli elementi tutte le div al di fuori del flusso normale del documento.
Quindi ci sono stack attualmente su ciascuno su linee separate.
E quello che accadrà è che fluttueranno a sinistra per pensarla come la gravità che sta scomparendo quasi nel
nostro documento.
E così questo div sta per fluttuare e spingere a sinistra.
Contro questo.
Quindi se fossi fresco qui puoi vedere che ora sono sulla stessa linea.
in modo che possiamo ottenere le immagini fondamentalmente che si scontrano e formano una griglia.
Quindi useremo questo principio quando usiamo le immagini
Quindi mi libererò di tutto questo ora e sbarazzerò del dispositivo che abbiamo e aggiungerò la nostra immagine
in questo modo.
Così ho intenzione di fare questo a schermo intero e basta incollare in questi collegamenti immagine che sono in quel
file incluso con questo video.
E invece di fare nove tag immagine come questo in cui creo un tag immagine e poi ti copio e lo incolli
in nove volte, il che dovrebbe essere molto lento.
ogni riga e poi scriverò la sorgente dell'immagine come uguale e poi passerò alla fine della riga.
Userò un po 'di magia sublime qui dove sto usando il comando click per selezionare l'inizio di
Quindi ho usato un comando con la freccia destra, il comando freccia destra lo porta al comando
iniziale, va alla fine e poi ho intenzione di terminare con la quota e poi con la parentesi di chiusura.
Questo è stato un modo davvero semplice e veloce per includere tutti i folletti come tag immagine.
Quindi se salvi questo e vanno al browser vedrai quando aggiorno.
Ora abbiamo nove immagini.
Ovviamente non sono integrati.
Stanno prendendo molto spazio.
Quindi quello che faremo ora è andare al nostro foglio di stile e selezionare tutte le immagini.
E la prima cosa che probabilmente vorremmo fare qui è semplicemente dar loro via.
Quindi diamo loro un con 100 pixel come inizio e questo sarà troppo piccolo.
Ma voglio che tu veda quello che succede e si aggiorni e noterai che tutte queste immagini ora sono in una linea
insieme ma che c'è una certa spaziatura tra di esse che non abbiamo specificato.
Non abbiamo mai impostato margini, padding o altro.
Quindi quello che sta succedendo è che in realtà c'è dello spazio bianco che viene aggiunto ed è un po 'una cosa
strana in un gufo del vapore.
Ma quando abbiamo immagini senza altro c'è uno spazio bianco o solo uno spazio che viene aggiunto
tra di esse.
Quindi, se vogliamo liberarcene, possiamo usare float e ricordare che float prenderà le cose fuori
dal flusso del documento.
Quindi, se aggiorno ora, puoi vedere che le immagini si intrecciano l'una con l'altra e in pratica non
c'è spazio tra di esse.
E poi possiamo tornare indietro e aggiungere quello spazio nel nostro sé.
Quindi ovviamente non vogliamo che occupino questo piccolo spazio.
Vogliamo che ce ne siano tre e vogliamo un margine tra di loro ma vogliamo controllarlo.
Quindi, facendoli fluttuare, abbiamo eliminato lo spazio bianco che il browser ha aggiunto per noi in modo che
ora possiamo passare alla nostra spaziatura personalizzata usando la proprietà del margine piuttosto che gli spazi bianchi effettivi.
Quindi ora cambieremo la larghezza e iniziamo con il 30 percento.
Quindi ricorda che la percentuale di Israele è relativa agli elementi genitoriali del corpo.
Quindi ognuno prenderà il 30 percento del corpo.
E la ragione per cui sto iniziando con il 30 è solo per assicurarmi che si adattino tutti su una linea o su tre.
Nella mia mente vedrai che tre di loro non attraversano nessuno spazio.
E poi abbiamo il nostro 10 percento qui perché questo è solo il 90 percento che stiamo prendendo.
Quindi useremo quell'altra percentuale per dividere effettivamente il margine e aggiungere una certa spaziatura tra di
loro.
Quindi abbiamo già una griglia tre a tre.
Quello che vogliamo fare è renderlo simile a questo.
O abbiamo anche la spaziatura tra di loro.
Quindi dobbiamo effettivamente fare un po 'di matematica.
Quindi l'ho già fatto.
Ma fondamentalmente se calcoliamo questo qui c'è un margine qui c'è un margine anche qui.
C'è un margine qui tre.
E poi su questo per quello su questo cinque.
E su questo uno o sei.
Quindi abbiamo il 10% e dobbiamo dividerlo per 6 e 10 diviso per sei è un punto sei sei.
Quindi quello che faremo è dire margine un punto sei sei per cento.
Quindi, se torniamo al browser e controlliamo il risultato e il refresh, vedremo che
otteniamo tre immagini equidistanti con spaziatura tra di esse.
Quindi la matematica ha appena colpito un'altra volta.
Ognuno di questi è il 10 percento.
Quindi danno solo il 30 percento.
E ognuno ha un margine di 1. 6 percento su entrambi i lati.
Quindi prendiamo entrambe le parti sinistra e destra un punto sei volte due più il 30 percento e otteniamo
trentatré tre virgola tre percento per ognuna di queste.
Quindi questo è un terzo esattamente o quasi esattamente stiamo arrotondando ma è il meglio che possiamo fare qui.
Quindi trentatre virgola tre percento.
Ognuno di questi possiamo ispezionare solo per verificarlo.
Eccoci.
Puoi vedere che occupa esattamente un terzo