1
00:00:00,630 --> 00:00:05,120
Neste vídeo, vamos criar o site de portfólio deste fotógrafo a partir do zero.

2
00:00:05,310 --> 00:00:10,830
E, normalmente, eu pediria que você tentasse fazer isso por conta própria e, em seguida, dar-lhe um vídeo de

3
00:00:10,830 --> 00:00:11,550
solução seguindo isso.

4
00:00:11,640 --> 00:00:14,050
No entanto, desta vez é um código deliberado ao longo.

5
00:00:14,070 --> 00:00:19,590
Então, eu gostaria que você tentasse codificar e, se preferir, você pode assistir uma vez e depois codificar

6
00:00:19,590 --> 00:00:20,650
na próxima vez.

7
00:00:20,850 --> 00:00:26,220
Mas o objetivo aqui é que vamos fazer isso juntos e há duas outras coisas que queremos

8
00:00:26,220 --> 00:00:26,940
sair disso.

9
00:00:26,940 --> 00:00:33,270
O primeiro é que há uma nova propriedade que vou mostrar o flutuador chamado e a segunda coisa é que eu só quero

10
00:00:33,270 --> 00:00:37,190
que você obtenha uma pequena experiência construindo algo que você possa estar um pouco orgulhoso.

11
00:00:37,200 --> 00:00:41,970
Isso parece um pouco melhor do que algumas das coisas simples, que são realmente cores brilhantes que

12
00:00:41,970 --> 00:00:43,160
já fizemos até agora.

13
00:00:43,170 --> 00:00:47,210
Então, este é um blog de fotos muito mínimo que nós vamos fazer.

14
00:00:47,280 --> 00:00:49,160
Então vamos começar.

15
00:00:49,230 --> 00:00:50,610
Abra sublime.

16
00:00:50,880 --> 00:00:54,330
Eu tenho um único arquivo chamado Photo grid que HMO.

17
00:00:54,960 --> 00:01:00,480
Eu vou primeiro mostrar a você a imagem ou então com quem estamos trabalhando.

18
00:01:00,480 --> 00:01:07,410
Então, estas são imagens de nove imagens, três imagens cada uma de três fotógrafos diferentes que encontrei

19
00:01:07,410 --> 00:01:08,390
no Flickr.

20
00:01:08,700 --> 00:01:10,920
Todas as fotos são licenciadas sob Creative Commons.

21
00:01:10,920 --> 00:01:13,030
Você pode obter a licença aqui.

22
00:01:13,050 --> 00:01:19,800
vou fazer uma demonstração rápida para que você don 't tem que codificar junto com esta parte quando

23
00:01:19,800 --> 00:01:27,180
eu adicionar a divs uma que diz olá e uma que diz adeus e eu vou salvá-los e então vou

24
00:01:27,180 --> 00:01:34,360
adicionar minha folha de estilo na qual eu estou chamando fotos do SS e depois aqui vou desenhar meus divs.

25
00:01:34,410 --> 00:01:42,150
Então, antes de fazer qualquer coisa com essas imagens você URLs, eu realmente vou me livrar deles e eu vou adicionar

26
00:01:43,350 --> 00:01:46,750
no meu esqueleto envelhecido ad-Din no blog e eu

27
00:01:46,770 --> 00:01:53,890
Então eu realmente vou dar-lhes um I. D. basta chamar um.

28
00:01:54,270 --> 00:02:06,810
E, novamente, isso é apenas para demonstrar algo e, em seguida, para um aqui, eu vou selecionar um e dois e tudo o que eu vou fazer

29
00:02:06,900 --> 00:02:10,020
é apenas dar-lhes uma cor de fundo

30
00:02:14,040 --> 00:02:25,980
diferente em vermelho e, em seguida, cor de fundo em roxo e então eu sou Vou dar a ambos todos os divs e uma largura

31
00:02:25,980 --> 00:02:27,630
de 100 pixels.

32
00:02:27,630 --> 00:02:32,430
Então, quando eu faço isso, eu o abrir no navegador.

33
00:02:33,540 --> 00:02:36,970
Nós temos dois divs um após o outro.

34
00:02:36,990 --> 00:02:39,020
Lembre-se que eles se inspecionamos.

35
00:02:39,480 --> 00:02:44,280
Eles são basicamente configurados para que eles levem sua própria linha seu elemento de nível de bloco.

36
00:02:44,280 --> 00:02:50,400
Então, se eu não quiser que isso aconteça, o que vamos fazer para a grade de imagem, queremos

37
00:02:50,400 --> 00:02:54,490
que nossas imagens formem uma grade ou vários estão na mesma linha.

38
00:02:54,540 --> 00:02:59,850
E se assim for, se eu quiser fazer isso com divs eu preciso usar uma propriedade chamada flutuante ou essa

39
00:02:59,850 --> 00:03:01,690
é uma maneira que eu posso conseguir.

40
00:03:01,740 --> 00:03:06,780
Então, aqui, tudo o que faço é flutuador seguro e o que isso fará.

41
00:03:06,780 --> 00:03:11,390
Isso levará os elementos de todas as divs para fora do fluxo normal do documento.

42
00:03:11,580 --> 00:03:14,730
Portanto, existem pilhas atualmente em cada uma em linhas separadas.

43
00:03:15,000 --> 00:03:22,200
E o que acontecerá é que eles flutuam para a esquerda para pensar nisso como a gravidade desaparecendo quase em

44
00:03:22,200 --> 00:03:23,090
nosso documento.

45
00:03:23,280 --> 00:03:26,380
E então esta div vai flutuar e empurrar para a esquerda.

46
00:03:26,400 --> 00:03:27,580
Contra isso.

47
00:03:27,990 --> 00:03:32,200
Então, se eu estivesse fresco aqui, você pode ver que eles estão agora na mesma linha.

48
00:03:32,280 --> 00:03:38,190
imagens para que possamos obter imagens basicamente para cima e formar uma grade.

49
00:03:38,550 --> 00:03:41,840
Então, vamos usar este princípio quando estamos usando

50
00:03:41,970 --> 00:03:48,600
Então eu vou me livrar de tudo isso agora e livrar-me do dispositivo que temos e eu vou adicionar

51
00:03:48,600 --> 00:03:49,910
em nossa imagem assim.

52
00:03:50,280 --> 00:03:55,770
Então, eu vou fazer essa tela cheia e apenas colar nesses links de imagens que

53
00:03:55,770 --> 00:03:57,040
estejam incluídos nesse arquivo.

54
00:03:57,810 --> 00:04:04,920
E ao invés de fazer nove tags de imagem como esta, eu faço uma marca de imagem e, em seguida, copie-o e

55
00:04:05,190 --> 00:04:08,230
cole-o em nove vezes, o que deve ser muito lento.

56
00:04:08,490 --> 00:04:15,660
cada linha e então eu vou apenas digitar iguais de fonte de imagem e depois passar para o final da linha.

57
00:04:15,660 --> 00:04:22,530
Eu vou usar um pouco de magia sublime aqui onde eu estou usando o comando clique para selecionar o início de

58
00:04:22,800 --> 00:04:28,650
Então eu usei um comando para a seta para a direita, a seta para a esquerda leva para o

59
00:04:28,710 --> 00:04:35,380
começo, o comando corre para o final e então eu vou terminar com a cotação e depois o suporte de fechamento.

60
00:04:35,400 --> 00:04:40,550
Então, essa foi uma maneira muito fácil e rápida de incluir todos aqueles que você é Elfos como tags de imagem.

61
00:04:40,920 --> 00:04:46,340
Então, se eu salvar isso e eles vão para o navegador, você verá quando eu atualizar.

62
00:04:46,530 --> 00:04:47,960
Agora temos nove imagens.

63
00:04:48,090 --> 00:04:49,680
Claro que não estão integrados.

64
00:04:49,890 --> 00:04:53,890
Eles estão ocupando muito espaço.

65
00:04:54,060 --> 00:05:01,230
Então, o que vamos fazer agora é ir para a nossa folha de estilos e selecionar todas as imagens.

66
00:05:01,230 --> 00:05:05,520
E a primeira coisa que provavelmente queremos fazer aqui é apenas dar-lhes.

67
00:05:06,090 --> 00:05:13,280
Então, vamos dar-lhes um como com 100 pixels para começar e isso será muito pequeno.

68
00:05:13,710 --> 00:05:21,540
Mas eu quero que você veja o que acontece e atualize e você notará que todas essas imagens agora estão em

69
00:05:21,540 --> 00:05:26,360
uma linha juntas, mas que há algum espaçamento entre elas que não especificamos.

70
00:05:26,430 --> 00:05:29,780
Nunca estabelecemos margem ou preenchimento ou qualquer coisa.

71
00:05:29,790 --> 00:05:34,590
Então, o que está acontecendo é que, na verdade, há um espaço em branco que está sendo adicionado e é um pouco

72
00:05:34,590 --> 00:05:36,040
peculiar em uma coruja de vapor.

73
00:05:36,050 --> 00:05:41,850
Mas quando temos imagens sem mais nada, há um espaço em branco ou apenas um espaço que é

74
00:05:41,850 --> 00:05:42,870
adicionado entre estes.

75
00:05:43,140 --> 00:05:49,710
Então, se quisermos nos livrar disso, podemos usar o flutuador e lembre-se de que o flutuador tirará as

76
00:05:49,710 --> 00:05:51,540
coisas do fluxo do documento.

77
00:05:51,570 --> 00:05:58,170
Então, se eu atualizar Agora, você pode ver que as imagens estão se encostando umas às outras e basicamente

78
00:05:58,170 --> 00:05:59,800
não há espaço entre elas.

79
00:06:00,150 --> 00:06:04,120
E então podemos voltar e adicionar esse espaço em nós mesmos.

80
00:06:04,170 --> 00:06:07,020
Então, obviamente, não queremos que eles ocupem este pequeno espaço.

81
00:06:07,020 --> 00:06:13,700
Nós queremos que três atravessem e queremos alguma margem entre eles, mas queremos controlar isso.

82
00:06:14,160 --> 00:06:20,610
Então, ao flutuar, livramos o espaço em branco que o navegador nos adicionou para que possamos entrar

83
00:06:20,610 --> 00:06:27,320
em nosso próprio espaçamento personalizado usando a propriedade da margem em vez de espaços em branco reais.

84
00:06:28,920 --> 00:06:33,670
Então agora vamos mudar a largura e vamos começar com 30%.

85
00:06:33,720 --> 00:06:39,180
Então lembre-se que a porcentagem de Israel é relativa aos elementos pai do corpo.

86
00:06:39,180 --> 00:06:41,910
Então, cada um irá ocupar 30% do corpo.

87
00:06:41,910 --> 00:06:46,800
E a razão pela qual eu estou começando com 30 é apenas para se certificar de que todos se encaixam em uma linha ou que as três se encaixam.

88
00:06:46,830 --> 00:06:52,120
Em minha mente e você verá que nós conseguimos que três deles atravessam nenhum espaço entre eles.

89
00:06:52,260 --> 00:06:58,370
E então nós temos nossos 10 por cento aqui porque isso é apenas 90 por cento que estamos assumindo.

90
00:06:58,470 --> 00:07:06,390
Então, vamos usar essa outra porcentagem para realmente dividir a margem e adicionar algum espaçamento entre

91
00:07:06,390 --> 00:07:06,790
eles.

92
00:07:07,020 --> 00:07:09,460
Então já temos uma grade três por três.

93
00:07:09,650 --> 00:07:12,550
O que queremos fazer em seguida é fazer com que pareça com isso.

94
00:07:12,750 --> 00:07:15,000
Ou temos o espaçamento entre eles.

95
00:07:15,180 --> 00:07:17,870
Então nós realmente temos que fazer um pouco de matemática.

96
00:07:18,060 --> 00:07:18,860
Então eu já fiz isso.

97
00:07:18,870 --> 00:07:26,210
Mas, basicamente, se calcularmos isso, há uma margem aqui, também há uma margem aqui.

98
00:07:26,570 --> 00:07:28,430
Há uma margem aqui três.

99
00:07:28,600 --> 00:07:32,400
E então sobre este para esse sobre este cinco.

100
00:07:32,670 --> 00:07:34,910
E sobre este um ou seis.

101
00:07:34,920 --> 00:07:45,570
Então, temos 10 por cento e precisamos dividir isso em 6 e 10 divididos por seis é um ponto seis seis.

102
00:07:45,570 --> 00:07:52,810
Então, o que vamos fazer é dizer margem de um ponto seis seis por cento.

103
00:07:52,950 --> 00:07:58,440
Então, se voltarmos para o navegador e verificar o resultado e atualizar, verá que

104
00:07:58,440 --> 00:08:01,900
obtemos três imagens uniformemente espaçadas com espaçamento entre eles.

105
00:08:01,950 --> 00:08:04,850
Então, a matemática só atingiu isso mais uma vez.

106
00:08:05,070 --> 00:08:06,570
Cada um deles é de 10 por cento.

107
00:08:06,570 --> 00:08:07,980
Então eles dão apenas 30%.

108
00:08:08,160 --> 00:08:12,370
E cada um tem uma margem de 1. 6 por cento de cada lado.

109
00:08:12,390 --> 00:08:19,700
Então, levamos os dois lados para a esquerda e para a direita um ponto seis vezes dois mais 30 por cento e

110
00:08:19,690 --> 00:08:22,920
recebemos trinta e três pontos por cada um desses.

111
00:08:22,920 --> 00:08:29,330
Então, esse é um terço exatamente ou quase exatamente, estamos arredondando, mas isso é o melhor que podemos fazer aqui.

112
00:08:29,530 --> 00:08:30,800
Então trinta e três pontos três por cento.

113
00:08:30,810 --> 00:08:35,200
Cada um destes podemos inspecionar apenas para verificar isso.

114
00:08:35,670 --> 00:08:36,670
Aqui vamos nós.

115
00:08:36,690 --> 00:08:39,360
Você pode ver que ele ocupa exatamente um terço