1
00:00:00,630 --> 00:00:05,120
W tym filmie mamy zamiar stworzyć portfolio fotografa witryny od podstaw.

2
00:00:05,310 --> 00:00:11,550
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.

3
00:00:11,640 --> 00:00:14,050
Jednak tym razem jest to celowe Kod razem.

4
00:00:14,070 --> 00:00:20,650
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.

5
00:00:20,850 --> 00:00:26,940
Ale celem jest to, że będziemy to robić razem i są dwie inne rzeczy, które chcemy, aby wydostać się z tego.

6
00:00:26,940 --> 00:00:37,190
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.

7
00:00:37,200 --> 00:00:43,160
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.

8
00:00:43,170 --> 00:00:47,210
Więc to jest naprawdę minimalne zdjęcia blog, który mamy zamiar zrobić.

9
00:00:47,280 --> 00:00:49,160
Więc zacznijmy.

10
00:00:49,230 --> 00:00:50,610
Otwórz się wzniosłe.

11
00:00:50,880 --> 00:00:54,330
Mam jeden plik o nazwie Photo siatka HMO.

12
00:00:54,960 --> 00:01:00,480
Idę najpierw pokazać obraz lub inny, że pracujesz.

13
00:01:00,480 --> 00:01:08,390
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.

14
00:01:08,700 --> 00:01:10,920
Wszystkie zdjęcia są na licencji Creative Commons.

15
00:01:10,920 --> 00:01:13,030
Można licencja tutaj.

16
00:01:13,050 --> 00:01:46,750
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.

17
00:01:46,770 --> 00:01:53,890
Więc jestem naprawdę zamiar dać im numeru identyfikacji po prostu nazwać to jeden.

18
00:01:54,270 --> 00:02:27,630
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.

19
00:02:27,630 --> 00:02:32,430
Więc kiedy mogę to zrobić ja go otworzyć w przeglądarce.

20
00:02:33,540 --> 00:02:36,970
Mamy dwa DIV jeden po drugim.

21
00:02:36,990 --> 00:02:39,020
Pamiętaj, że jeśli mamy wglądu.

22
00:02:39,480 --> 00:02:44,280
Zasadniczo są one ustawione tak, że ma własną linię swoim żywiole poziomie bloków.

23
00:02:44,280 --> 00:02:54,490
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.

24
00:02:54,540 --> 00:03:01,690
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ąć.

25
00:03:01,740 --> 00:03:06,780
Więc wszystko co robię jest bezpieczny pływaka lewo i co to zrobi.

26
00:03:06,780 --> 00:03:11,390
To zajmie wówczas wszystkie elementy div z normalnego przepływu dokumentu.

27
00:03:11,580 --> 00:03:14,730
Tak więc istnieje obecnie na siebie stosy na oddzielnych liniach.

28
00:03:15,000 --> 00:03:23,090
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.

29
00:03:23,280 --> 00:03:26,380
Tak więc, to strefa będzie unosić się i przesunąć w lewo.

30
00:03:26,400 --> 00:03:27,580
W związku z tym jednym.

31
00:03:27,990 --> 00:03:32,200
Więc jeśli były świeże tutaj można zobaczyć, że są one teraz w tej samej linii.

32
00:03:32,280 --> 00:03:41,840
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ę.

33
00:03:41,970 --> 00:03:49,910
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.

34
00:03:50,280 --> 00:03:57,040
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.

35
00:03:57,810 --> 00:04:08,230
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.

36
00:04:08,490 --> 00:04:22,730
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.

37
00:04:22,800 --> 00:04:35,380
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.

38
00:04:35,400 --> 00:04:40,550
Więc to był bardzo łatwy i szybki sposób, aby dołączyć wszystkie te, które są elfy jako znaczniki obrazu.

39
00:04:40,920 --> 00:04:46,340
Więc jeśli mogę zapisać to i idą do przeglądarki zobaczysz kiedy odświeżenia.

40
00:04:46,530 --> 00:04:47,960
Mamy teraz dziewięć obrazów.

41
00:04:48,090 --> 00:04:49,680
Oczywiście, że nie są zintegrowane.

42
00:04:49,890 --> 00:04:53,890
Zabierają się dużo miejsca.

43
00:04:54,060 --> 00:05:01,230
Więc co mamy zamiar teraz zrobić, to udać się do naszego arkusza stylów i wybrać wszystkie obrazy.

44
00:05:01,230 --> 00:05:05,520
A pierwszą rzeczą, która prawdopodobnie chce zrobić tutaj jest po prostu dać im daleko.

45
00:05:06,090 --> 00:05:13,280
Więc dajmy im się jak 100 pikseli, aby rozpocząć i to będzie zbyt mała.

46
00:05:13,710 --> 00:05:26,360
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ł.

47
00:05:26,430 --> 00:05:29,780
Nigdy ustawić margines lub dopełnienie lub cokolwiek.

48
00:05:29,790 --> 00:05:36,040
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.

49
00:05:36,050 --> 00:05:42,870
Ale gdy mamy zdjęć bez niczego innego nie jest białe znaki, czy tylko jedna przestrzeń, która jest dodawana pomiędzy nimi.

50
00:05:43,140 --> 00:05:51,540
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.

51
00:05:51,570 --> 00:05:59,800
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.

52
00:06:00,150 --> 00:06:04,120
A potem możemy wrócić i dodać tę przestrzeń w naszej jaźni.

53
00:06:04,170 --> 00:06:07,020
Więc oczywiście nie chcę, żeby podjąć to niewiele miejsca.

54
00:06:07,020 --> 00:06:13,700
Chcemy trzy dzieje po drugiej stronie i chcemy pewien margines pomiędzy nimi, ale chcemy sterować tym.

55
00:06:14,160 --> 00:06:27,320
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.

56
00:06:28,920 --> 00:06:33,670
Więc teraz mamy zamiar zmienić szerokość i zacznijmy 30 procent.

57
00:06:33,720 --> 00:06:39,180
Tak więc należy pamiętać, że procent Izrael w stosunku do elementów nadrzędnych ciała.

58
00:06:39,180 --> 00:06:41,910
Tak więc każdy z nich odbędzie się 30 procent ciała.

59
00:06:41,910 --> 00:06:46,830
A powodem Zaczynam 30 jest tylko, aby upewnić się wszyscy zmieścić w jednym wierszu lub że trzy dopasowanie.

60
00:06:46,830 --> 00:06:52,120
W moim umyśle, a zobaczysz, że mamy trzy z nich idzie w poprzek bez przestrzeni pomiędzy.

61
00:06:52,260 --> 00:06:58,370
A potem mamy 10 procent tutaj, ponieważ jest to tylko 90 procent, że bierzemy się.

62
00:06:58,470 --> 00:07:06,790
Więc mamy zamiar wykorzystać tę drugą odsetek faktycznie podzielone na margines i dodać trochę odstępy między nimi.

63
00:07:07,020 --> 00:07:09,460
Więc już mamy trzy przez trzy siatki.

64
00:07:09,650 --> 00:07:12,550
To, co chcemy zrobić, to upewnić wyglądać następująco.

65
00:07:12,750 --> 00:07:15,000
Albo nawet odstępy między nimi.

66
00:07:15,180 --> 00:07:17,870
Więc tak naprawdę trzeba zrobić trochę matematyki.

67
00:07:18,060 --> 00:07:18,860
Więc już to zrobił.

68
00:07:18,870 --> 00:07:26,210
Ale w zasadzie, jeśli liczymy to jest margines tu jedną istnieje margines tu.

69
00:07:26,570 --> 00:07:28,430
Jest tu trzech margines.

70
00:07:28,600 --> 00:07:32,400
I wtedy na tym, że dla tego jednego na pięciu.

71
00:07:32,670 --> 00:07:34,910
I na tej jednej lub sześciu.

72
00:07:34,920 --> 00:07:45,570
Mamy więc 10 procent i musimy podzielić, że do 6 i 10 dzieli się przez sześć jeden punkt sześć sześć.

73
00:07:45,570 --> 00:07:52,810
Więc co mamy zamiar zrobić, to po prostu powiedzieć margines jeden punkt sześć sześć procent.

74
00:07:52,950 --> 00:08:01,900
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.

75
00:08:01,950 --> 00:08:04,850
Więc matematyka po prostu uderzył jeszcze raz.

76
00:08:05,070 --> 00:08:06,570
Każdy z nich jest 10 proc.

77
00:08:06,570 --> 00:08:07,980
Więc dają tylko 30 proc.

78
00:08:08,160 --> 00:08:12,370
I każdy z nich ma pewien margines 1,6 proc po obu stronach.

79
00:08:12,390 --> 00:08:22,920
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.

80
00:08:22,920 --> 00:08:29,330
Więc to jest jedna trzecia dokładnie lub prawie dokładnie jesteśmy zaokrąglenia ale to najlepsze, co możemy zrobić.

81
00:08:29,530 --> 00:08:30,800
Więc trzydzieści trzy przecinek trzy procent.

82
00:08:30,810 --> 00:08:35,200
Każdy z nich możemy sprawdzić tylko sprawdzać.

83
00:08:35,670 --> 00:08:36,670
No to jedziemy.