W tym filmie mamy zamiar stworzyć portfolio fotografa witryny od podstaw.
I zazwyczaj prosiłbym cię próbować to zrobić na własną rękę, a następnie daje następujące rozwiązanie tego filmu.
Jednak tym razem jest to celowe Kod razem.
Więc chciałbym, aby próbować kodu wraz a jeśli wolisz, możesz obejrzeć go raz, a następnie za pośrednictwem kodu po raz kolejny.
Ale celem jest to, że będziemy to robić razem i są dwie inne rzeczy, które chcemy, aby wydostać się z tego.
Pierwszy z nich to nowe nieruchomości Zamierzam pokazać nazwie pływak i druga sprawa jest taka, że ​​po prostu chcą, aby uzyskać trochę doświadczenia budowania coś, że można być trochę dumny.
To wygląda trochę lepiej niż niektóre z prostych rzeczy, które są po prostu naprawdę okropne jasne kolory, które zrobiliśmy do tej pory.
Więc to jest naprawdę minimalne zdjęcia blog, który mamy zamiar zrobić.
Więc zacznijmy.
Otwórz się wzniosłe.
Mam jeden plik o nazwie Photo siatka HMO.
Idę najpierw pokazać obraz lub inny, że pracujesz.
Więc to są obrazy dziewięć obrazów trzy obrazy, każdy z trzech różnych fotografów, które znalazłem w serwisie Flickr.
Wszystkie zdjęcia są na licencji Creative Commons.
Można licencja tutaj.
Więc zanim zrobimy coś z tymi adresami URL obrazu, który ja faktycznie się ich pozbyć i mam zamiar dodać w moim wieku szkielet ad-Din na zdjęciu blogu i mam zamiar zrobić szybki pokaz więc don 't trzeba kodować wraz z tą częścią, gdy dodam do DIV, który mówi cześć i który mówi do widzenia i mam zamiar je zapisać, a potem mam zamiar dodać mojego arkusza stylów, w których dzwonię Fotogaleria SS, a potem tu będę projektować moje DIV.
Więc jestem naprawdę zamiar dać im numeru identyfikacji po prostu nazwać to jeden.
I znowu jest to po prostu zademonstrować coś, a następnie do tu mam zamiar wybrać jeden i dwa i wszystko, co zamierzam zrobić, to dać im inny kolor tła, a następnie czerwony fioletowy kolor tła, a potem jestem zamiar dać oboje wszystkie div i szerokości 100 pikseli.
Więc kiedy mogę to zrobić ja go otworzyć w przeglądarce.
Mamy dwa DIV jeden po drugim.
Pamiętaj, że jeśli mamy wglądu.
Zasadniczo są one ustawione tak, że ma własną linię swoim żywiole poziomie bloków.
Więc jeśli nie chcę, aby to się co jest, co mamy zamiar zrobić dla siatki obrazu Chcemy, aby nasze zdjęcia, tworząc siatkę lub wielokrotność są na tej samej linii.
A jeśli tak, czy chcę to zrobić z div muszę używać właściwość o nazwie pływak albo że jeden ze sposobów, które można osiągnąć.
Więc wszystko co robię jest bezpieczny pływaka lewo i co to zrobi.
To zajmie wówczas wszystkie elementy div z normalnego przepływu dokumentu.
Tak więc istnieje obecnie na siebie stosy na oddzielnych liniach.
A co się stanie, jest to, że będą one unosić się w lewo, aby myśleć o tym, jak grawitacja odchodzi niemal w naszym dokumencie.
Tak więc, to strefa będzie unosić się i przesunąć w lewo.
W związku z tym jednym.
Więc jeśli były świeże tutaj można zobaczyć, że są one teraz w tej samej linii.
Więc mamy zamiar wykorzystać tę zasadę, gdy używamy obrazów, dzięki czemu możemy uzyskać obrazy w zasadzie udać się ze sobą i tworzą siatkę.
Więc mam zamiar pozbyć się tego wszystkiego i teraz pozbyć się urządzenia, które mamy i mam zamiar dodać na nasz obraz jak ten.
Więc mam zamiar zrobić to na pełnym ekranie i po prostu wkleić tych linków graficznych, które są zawarte w tym pliku z filmem.
I zamiast co dziewięć znaczników graficznych jak to gdzie mogę złożyć znacznika obrazu i skopiuj was wokół i wkleić go w dziewięciu razy, co powinno być bardzo powolne.
Zamierzam użyć trochę wysublimowanej magii tu, gdzie używam polecenia kliknij, aby zaznaczyć początek każdej linii, a potem jestem po prostu wpisać źródło obrazu równa, a następnie przenieść do końca linii.
Więc użyłem komendy strzałka w prawo komendy strzałka w lewo zabiera go do polecenia rozpoczynającego się w prawo aż do końca, a potem mam zamiar skończyć z cytatem a następnie wspornika zamknięcia.
Więc to był bardzo łatwy i szybki sposób, aby dołączyć wszystkie te, które są elfy jako znaczniki obrazu.
Więc jeśli mogę zapisać to i idą do przeglądarki zobaczysz kiedy odświeżenia.
Mamy teraz dziewięć obrazów.
Oczywiście, że nie są zintegrowane.
Zabierają się dużo miejsca.
Więc co mamy zamiar teraz zrobić, to udać się do naszego arkusza stylów i wybrać wszystkie obrazy.
A pierwszą rzeczą, która prawdopodobnie chce zrobić tutaj jest po prostu dać im daleko.
Więc dajmy im się jak 100 pikseli, aby rozpocząć i to będzie zbyt mała.
Ale chcę, aby zobaczyć, co się dzieje i odświeżyć i można zauważyć, że wszystkie te obrazy są teraz w kolejce razem, ale że istnieje jakiś odstęp między nimi, że nie określił.
Nigdy ustawić margines lub dopełnienie lub cokolwiek.
Więc co się dzieje, jest to, że rzeczywiście niektóre białej przestrzeni, która jest dodawana i to jest trochę ekscentryczny rzeczy w sowy parowej.
Ale gdy mamy zdjęć bez niczego innego nie jest białe znaki, czy tylko jedna przestrzeń, która jest dodawana pomiędzy nimi.
Więc jeśli chcemy pozbyć się, że możemy używać pacy i pamiętać, że pływak będzie wybierać rzeczy z przepływu dokumentu.
Więc jeśli odświeżyć Teraz widać, że są to obrazy są wtrącanie się ze sobą i nie ma w zasadzie nie ma miejsca w ogóle między nimi.
A potem możemy wrócić i dodać tę przestrzeń w naszej jaźni.
Więc oczywiście nie chcę, żeby podjąć to niewiele miejsca.
Chcemy trzy dzieje po drugiej stronie i chcemy pewien margines pomiędzy nimi, ale chcemy sterować tym.
Tak przez nich pływające pozbyliśmy białej przestrzeni, że przeglądarka dodaną dla nas tak, że możemy iść na własny rozstawie niestandardowej przy użyciu właściwości margin zamiast rzeczywistej spacji.
Więc teraz mamy zamiar zmienić szerokość i zacznijmy 30 procent.
Tak więc należy pamiętać, że procent Izrael w stosunku do elementów nadrzędnych ciała.
Tak więc każdy z nich odbędzie się 30 procent ciała.
A powodem Zaczynam 30 jest tylko, aby upewnić się wszyscy zmieścić w jednym wierszu lub że trzy dopasowanie.
W moim umyśle, a zobaczysz, że mamy trzy z nich idzie w poprzek bez przestrzeni pomiędzy.
A potem mamy 10 procent tutaj, ponieważ jest to tylko 90 procent, że bierzemy się.
Więc mamy zamiar wykorzystać tę drugą odsetek faktycznie podzielone na margines i dodać trochę odstępy między nimi.
Więc już mamy trzy przez trzy siatki.
To, co chcemy zrobić, to upewnić wyglądać następująco.
Albo nawet odstępy między nimi.
Więc tak naprawdę trzeba zrobić trochę matematyki.
Więc już to zrobił.
Ale w zasadzie, jeśli liczymy to jest margines tu jedną istnieje margines tu.
Jest tu trzech margines.
I wtedy na tym, że dla tego jednego na pięciu.
I na tej jednej lub sześciu.
Mamy więc 10 procent i musimy podzielić, że do 6 i 10 dzieli się przez sześć jeden punkt sześć sześć.
Więc co mamy zamiar zrobić, to po prostu powiedzieć margines jeden punkt sześć sześć procent.
Więc jeśli chcemy wrócić do przeglądarki i sprawdzić wynik i odświeżyć zobaczysz, że mamy trzy równomiernie rozmieszczone obrazy z odstępami między nimi.
Więc matematyka po prostu uderzył jeszcze raz.
Każdy z nich jest 10 proc.
Więc dają tylko 30 proc.
I każdy z nich ma pewien margines 1,6 proc po obu stronach.
Więc bierzemy lewy i prawy po obu stronach jednego punktu sześć razy dwa plus 30 procent i mamy trzydzieści trzy przecinek trzy procent dla każdego z nich.
Więc to jest jedna trzecia dokładnie lub prawie dokładnie jesteśmy zaokrąglenia ale to najlepsze, co możemy zrobić.
Więc trzydzieści trzy przecinek trzy procent.
Każdy z nich możemy sprawdzić tylko sprawdzać.
No to jedziemy.