In deze video gaan we van deze fotograaf portfolio site van de grond af te maken.
En meestal wil ik u vragen om te proberen om dit te doen op uw eigen en dan geef je een oplossing video na dit.
Maar dit keer is het een bewuste code samen.
Dus ik wil graag dat je probeert om mee te coderen en als u wilt kunt u het een keer kijken door en vervolgens code langs de volgende keer.
Maar het doel hier is dat we gaan het samen doen en er zijn twee andere dingen die we willen uit dit te omzeilen.
De eerste is dat er een nieuw pand ga ik belde vlotter te laten zien en het tweede ding is dat ik wil gewoon dat je een beetje ervaring met het bouwen iets dat je een beetje trots op kan zijn te krijgen.
Dat ziet er een beetje beter dan sommige van de eenvoudige dingen die net echt helder verschrikkelijk kleuren die we tot nu toe hebben gedaan.
Dus dit is een echt minimaal fotoblog dat we gaan doen.
Dus laten we beginnen.
Openstellen subliem.
Ik heb een bestand met de naam Photo raster dat HMO.
Ik ga naar de afbeelding of anders dat we werken met de eerste laten zien.
Dus deze beelden zijn negen beelden drie beelden elk uit drie verschillende fotografen die ik vond op Flickr.
Alle foto's zijn gelicenseerd onder Creative Commons.
U kunt de licentie hier.
Dus voordat we iets doen met deze afbeelding die u URL's Ik ben eigenlijk van plan om zich te ontdoen van hen te krijgen en ik ga toe te voegen in mijn oude skelet ad-Din foto blog en ik ga snel een demonstratie te doen, zodat je don 't hebben om mee te coderen met dit deel toen ik toevoegen aan een die gedag zegt en een die vaarwel zegt divs en ik ga om hen te redden en dan ga ik naar mijn stylesheet waarin ik bel foto's van de toe te voegen SS en dan hier ga ik mijn divs stylen.
Dus ik ben eigenlijk gaan ze een binnendiameter te geven noemen het een.
En ook dit is gewoon iets en vervolgens naar een demonstreren hier ga ik één en twee te kiezen en alles wat ik ga doen is gewoon geef ze een andere achtergrond kleur rood en dan achtergrond kleur paars en dan ben ik naar beiden alle divs en een breedte van 100 pixels geven.
Dus toen ik dit doe ik het open te stellen in de browser.
We hebben twee divs ene na de andere.
Vergeet niet dat ze als we inspecteren.
Ze zijn in principe zo ingesteld dat zij hun eigen lijn hun block-level element te nemen.
Dus als ik niet wil dat dit gebeurt en dat is wat we gaan doen voor het imago raster we willen dat onze beelden naar een raster of meer op dezelfde lijn te vormen.
En zo ja, als ik wil dat doen met divs ik nodig heb om een ​​eigenschap float gebruikt of dat is een manier waarop ik het kan bereiken.
Dus hier alles wat ik doe is veilig float links en wat dat zal doen.
Het zal de elementen alle divs uit te maken van de normale stroom van het document.
Dus er zijn stapels momenteel op elk op aparte regels.
En wat er zal gebeuren is dat ze zullen zweven naar links te denken van het als de zwaartekracht weg te gaan bijna in ons document.
En dus deze div gaat zweven en naar links te duwen.
Tegen deze.
Dus als ik verse waren hier kun je zien dat ze nu op dezelfde lijn.
Dus gaan we dit principe te gebruiken als we beelden gebruiken, zodat we kunnen krijgen afbeeldingen om in principe omhoog te gaan tegen elkaar en vormen een raster.
Dus ik ga nu zich te ontdoen van dit alles te krijgen en zich te ontdoen van het apparaat dat we hebben en ik ga toe te voegen aan ons imago als deze.
Dus ik ga dit het volledige scherm te maken en gewoon plakken in deze afbeelding links die in dat bestand opgenomen met deze video.
En in plaats van negen image-tags als deze waar ik een afbeelding tag en kopieer je rond en plak deze in negen keer die zeer traag zou moeten zijn.
Ik ga een beetje van sublieme magie gebruiken hier waar ik ben met behulp van commando klik naar het begin van elke lijn te selecteren en vervolgens Ik ga gewoon op de foto om de bron is gelijk aan typen en vervolgens aan het einde van de regel.
Dus gebruikte ik een opdracht pijl naar rechts commando linkerpijl neemt het aan het begin commando rechts gaat naar het einde en dan ga ik om te eindigen met het citaat en vervolgens het haakje sluiten.
Dus dat was echt een gemakkelijke en snelle manier om al die je bent Elves als image-tags omsluiten.
Dus als ik dit op te slaan en ze gaan naar de browser die u zult zien wanneer ik te vernieuwen.
We hebben nu negen beelden.
Natuurlijk zijn niet geïntegreerd.
Ze nemen een hoop ruimte.
Dus wat we nu gaan doen is naar onze style sheet en selecteer alle afbeeldingen.
En het eerste wat we waarschijnlijk willen hier doen is gewoon geef ze weg.
Dus laten we hen geven met als 100 pixels om te starten en dit gaat veel te klein te zijn.
Maar ik wil dat je om te zien wat er gebeurt en te frissen en je zult merken dat al deze beelden nu in een lijn met elkaar, maar dat er enige afstand tussen hen dat we niet opgeven.
We hebben nooit een margin of padding of iets dergelijks.
Dus wat is gebeurt is dat er eigenlijk een aantal witte ruimte die wordt toegevoegd en het is een beetje een eigenzinnig ding in een stoom uil.
Maar als we beelden hebben, zonder iets anders is er een witte ruimte of slechts een enkele ruimte die is toegevoegd tussen deze.
Dus als we willen om zich te ontdoen van die kunnen we float gebruiken en vergeet niet dat vlotter zal dingen uit de stroom van het document te nemen.
Dus als ik nu vernieuwen je kunt zien dat de beelden zijn, worden stoten tegen elkaar en er is eigenlijk geen ruimte tussen hen.
En dan kunnen we terug te gaan en toe te voegen dat de ruimte in ons zelf.
Dus we natuurlijk niet willen dat ze tot het nemen van deze kleine ruimte.
We willen wel drie gaan over en we willen wat marge tussen hen, maar we willen controleren dat.
Dus door hen te drijven kregen we ontdoen van de witte ruimte die de browser toegevoegd voor ons zodat we nu kunnen gaan in onze eigen aangepaste afstand met de eigenschap marge in plaats van werkelijke witruimte.
Dus nu gaan we om de breedte te veranderen en laten we beginnen met 30 procent.
Dus niet vergeten dat het percentage Israël opzichte van de bovenliggende elementen van het lichaam.
Dus ieder zal nemen 30 procent van het lichaam.
En de reden waarom ik ben beginnen met 30 is gewoon om ervoor te zorgen dat ze allemaal op één regel past, of dat drie fit.
In mijn gedachten en je zult zien dat we drie van hen gaan over geen ruimte tussen.
En dan hebben we onze 10 procent ten opzichte van hier, want dit is nog maar 90 procent dat we opnemen.
Dus we gaan naar die andere percentage gebruiken om daadwerkelijk splitsen de marge en voeg wat ruimte tussen hen.
Dus al hebben we een drie bij drie raster.
Wat we willen gaan doen is zodat het lijkt alsof dit.
Of we hebben zelfs tussenruimte tussen hen.
Dus we hebben eigenlijk een beetje wiskunde te doen.
Zo heb ik al gedaan.
Maar in principe als we dit te berekenen is er een marge hier op een er een marge hier ook.
Er is een marge hier drie.
En dan op dit ene voor die op dit ene vijf.
En op deze of zes.
Dus hebben we 10 procent en we moeten delen door 6 en 10 gedeeld door zes is één punt zes zes.
Dus wat we gaan doen is gewoon zeggen marge één punt zes van zes procent.
Dus als we teruggaan naar de browser en bekijk het resultaat en te vernieuwen je zult zien dat we drie gelijkmatig uit elkaar geplaatste beelden met afstand tussen hen.
Dus de wiskunde gewoon op dat nog een keer.
Elk van deze is 10 procent.
Dus geven ze slechts 30 procent.
En elk heeft een marge van 1,6 procent aan beide zijden.
Dus nemen we beide kanten links en rechts een gegeven moment zes keer twee plus 30 procent en we krijgen drieëndertig punt drie procent voor elk van deze.
Dus dat is een derde precies of bijna precies zijn we zeker scoren, maar dat is het beste wat we hier doen.
Dus drieëndertig punt drie procent.
Elk van deze kunnen we gewoon inspecteren om te verifiëren dat.
Daar gaan we.