Dans cette vidéo, nous allons créer le portfolio de ce photographe à partir de zéro.
Et d'habitude, je vous demanderais d'essayer de le faire par vous-même et de vous donner une vidéo de solution à la suite de cela.
Cependant, cette fois, c'est un code délibéré.
Donc, je voudrais que vous essayiez de coder le long et si vous préférez, vous pouvez le regarder une fois à travers et ensuite le code le long de la prochaine fois.
Mais le but ici est que nous allons le faire ensemble et il ya deux autres choses que nous voulons sortir de cela.
La première est qu'il ya une nouvelle propriété que je vais montrer appelée float et la deuxième chose est que je veux juste que vous obteniez un peu d'expérience construire quelque chose dont vous pouvez être un peu fière.
Cela ressemble un peu mieux que certaines des choses simples qui sont juste vraiment brillantes couleurs horribles que nous avons fait jusqu'à présent.
Il s'agit donc d'un blog photo vraiment minimal que nous allons faire.
Alors, commençons.
Ouvrez sublime.
J'ai un seul fichier appelé photo grille que HMO.
Je vais d'abord vous montrer l'image ou bien que nous travaillons avec.
Donc, ce sont des images neuf images trois images chacune de trois photographes différents que j'ai trouvé sur Flickr.
Toutes les photos sont sous licence Creative Commons.
Vous pouvez obtenir la licence ici.
Donc, avant de faire quelque chose avec ces images que vous URLs, je suis en fait va se débarrasser d'eux et je vais ajouter dans mon vieux squelette ad-Din dans photo blog et je vais faire une démonstration rapide afin que vous don 'T devoir coder avec cette partie quand je ajouter à divs un qui dit bonjour et un qui dit au revoir et je vais les sauver et puis je vais ajouter ma feuille de style dans lequel j'appelle photos de la SS et puis ici je vais à mon style divs.
Alors je vais leur donner un I.D. Juste l'appeler un.
Et encore une fois c'est juste pour démontrer quelque chose et puis à un ici je vais sélectionner un et deux et tout ce que je vais faire, c'est juste leur donner une couleur de fond différente rouge et puis couleur de fond violet et puis je suis Va donner à tous les deux tous les divs et une largeur de 100 pixels.
Donc, quand je fais cela, je l'ouvre dans le navigateur.
Nous avons deux divs l'un après l'autre.
Rappelez-vous que si nous inspectons.
Ils sont fondamentalement mis en place afin qu'ils prennent leur propre ligne leur élément de niveau bloc.
Donc, si je ne veux pas que cela arrive, ce que nous allons faire pour la grille d'image, nous voulons que nos images forment une grille ou plusieurs sont sur la même ligne.
Et si oui, si je veux faire cela avec divs, j'ai besoin d'utiliser une propriété appelée float ou c'est une façon que je peux l'accomplir.
Donc, ici, tout ce que je fais c'est flotter en sécurité à gauche et ce que cela va faire.
Il prendra les éléments tous les divs hors du flux normal du document.
Donc, il ya des piles actuellement sur chacun sur des lignes séparées.
Et ce qui se passera, c'est qu'ils flotteront vers la gauche pour y penser comme la gravité s'éloignant presque dans notre document.
Et donc cette div va flotter et pousser vers la gauche.
Contre celui-ci.
Donc, si j'étais frais ici, vous pouvez voir qu'ils sont maintenant sur la même ligne.
Donc, nous allons utiliser ce principe lorsque nous utilisons des images afin que nous puissions obtenir des images d'aller fondamentalement les uns contre les autres et de former une grille.
Donc je vais me débarrasser de tout cela maintenant et se débarrasser de l'appareil que nous avons et je vais ajouter à notre image comme ça.
Donc je vais faire ce plein écran et collez simplement dans ces liens d'image qui sont dans ce fichier inclus avec cette vidéo.
Et plutôt que de faire neuf balises d'image comme celle-ci où je fais une balise d'image, puis vous copiez autour et le coller en neuf fois ce qui devrait être très lent.
Je vais utiliser un peu de magie sublime ici où je suis en utilisant la commande cliquez sur pour sélectionner le début de chaque ligne et puis je vais juste pour saisir image source égales et puis passer à la fin de la ligne.
Donc, j'ai utilisé une commande de flèche à droite de la flèche direction gauche, il prend à la commande de début droit va à la fin et puis je vais terminer avec la citation et puis le support de fermeture.
Donc, c'était une façon très simple et rapide d'inclure tous ceux que vous êtes Elfes comme balises d'image.
Donc, si je l'enregistre et ils vont au navigateur, vous verrez quand je rafraîchir.
Nous avons maintenant neuf images.
Bien sûr, ne sont pas intégrés.
Ils prennent beaucoup de place.
Donc, ce que nous allons faire maintenant est d'aller à notre feuille de style et de sélectionner toutes les images.
Et la première chose que nous voulons probablement faire ici est juste de les donner.
Donc nous allons leur donner un avec comme 100 pixels pour commencer et cela va être trop petit.
Mais je veux que vous voyiez ce qui se passe et de rafraîchir et vous remarquerez que toutes ces images sont maintenant dans une ligne ensemble, mais qu'il ya un certain espace entre eux que nous n'avons pas précisé.
Nous n'avons jamais marge ou rembourrage ou quoi que ce soit.
Donc, ce qui se passe, c'est qu'il ya effectivement un peu d'espace blanc qui est ajouté et c'est un peu une chose bizarre dans un hibou à vapeur.
Mais quand nous avons des images sans autre chose il ya un espace blanc ou juste un espace unique qui est ajouté entre ces derniers.
Donc, si nous voulons nous débarrasser de cela, nous pouvons utiliser float et rappelez-vous que flotteur prendra les choses hors du flux du document.
Donc, si je rafraîchir Maintenant, vous pouvez voir que les images sont butting contre les uns les autres et il n'y a essentiellement aucun espace entre eux.
Et puis nous pouvons revenir en arrière et ajouter cet espace dans notre soi.
Nous ne voulons évidemment pas qu'ils prennent ce petit espace.
Nous voulons que trois passent et nous voulons une marge entre les deux, mais nous voulons contrôler cela.
Ainsi en les flottant nous nous sommes débarrassés de l'espace blanc que le navigateur a ajouté pour nous afin que nous puissions maintenant aller dedans à notre propre espacement fait sur commande using la propriété de marge plutôt que les blancs réels.
Donc, maintenant, nous allons changer la largeur et commençons par 30 pour cent.
Rappelez-vous donc que le pourcentage d'Israël est relatif aux éléments parents du corps.
Donc, chacun prendra 30 pour cent du corps.
Et la raison pour laquelle je commence avec 30 est juste pour s'assurer qu'ils tous s'inscrivent sur une ligne ou que trois en forme.
Dans mon esprit et vous verrez que nous obtenons trois d'entre eux traverser sans espace entre.
Et puis nous avons notre 10 pour cent ici parce que ce n'est que 90 pour cent que nous prenons.
Donc, nous allons utiliser cet autre pourcentage pour diviser réellement la marge et ajouter un certain espace entre eux.
Donc, nous avons déjà une grille trois par trois.
Ce que nous voulons faire ensuite est de le faire ressembler à ceci.
Ou nous avons même espacement entre eux.
Nous devons donc faire un peu de mathématiques.
Je l'ai déjà fait.
Mais essentiellement si nous calculons ceci il y a une marge ici un là est une marge ici aussi.
Il y a une marge ici trois.
Et puis sur celui-ci pour celui sur celui-ci cinq.
Et sur ce ou six.
Donc nous avons 10 pour cent et nous devons diviser par 6 et 10 divisé par six est un point six six.
Donc, ce que nous allons faire, c'est juste dire marge un point six six pour cent.
Donc, si nous revenons au navigateur et vérifions le résultat et nous actualisons, vous verrez que nous obtenons trois images uniformément espacées avec un espacement entre elles.
Donc, les mathématiques juste frappé que une fois de plus.
Chacun d'eux est de 10 pour cent.
Donc, ils ne donnent que 30 p.
Et chacun a une marge de 1,6 pour cent de chaque côté.
Donc nous prenons les deux côtés à gauche et à droite un point six fois deux plus 30 pour cent et nous obtenons trente trois point trois pour cent pour chacun d'eux.
C'est donc un tiers exactement ou presque exactement que nous arrondissons, mais c'est ce que nous pouvons faire ici.
Donc trente-trois point trois pour cent.
Chacun de ceux-ci nous pouvons inspecter juste pour vérifier cela.
Voilà.