Neste vídeo, vamos criar o site de portfólio deste fotógrafo a partir do zero.
E, normalmente, eu pediria que você tentasse fazer isso por conta própria e, em seguida, dar-lhe um vídeo de
solução seguindo isso.
No entanto, desta vez é um código deliberado ao longo.
Então, eu gostaria que você tentasse codificar e, se preferir, você pode assistir uma vez e depois codificar
na próxima vez.
Mas o objetivo aqui é que vamos fazer isso juntos e há duas outras coisas que queremos
sair disso.
O primeiro é que há uma nova propriedade que vou mostrar o flutuador chamado e a segunda coisa é que eu só quero
que você obtenha uma pequena experiência construindo algo que você possa estar um pouco orgulhoso.
Isso parece um pouco melhor do que algumas das coisas simples, que são realmente cores brilhantes que
já fizemos até agora.
Então, este é um blog de fotos muito mínimo que nós vamos fazer.
Então vamos começar.
Abra sublime.
Eu tenho um único arquivo chamado Photo grid que HMO.
Eu vou primeiro mostrar a você a imagem ou então com quem estamos trabalhando.
Então, estas são imagens de nove imagens, três imagens cada uma de três fotógrafos diferentes que encontrei
no Flickr.
Todas as fotos são licenciadas sob Creative Commons.
Você pode obter a licença aqui.
vou fazer uma demonstração rápida para que você don 't tem que codificar junto com esta parte quando
eu adicionar a divs uma que diz olá e uma que diz adeus e eu vou salvá-los e então vou
adicionar minha folha de estilo na qual eu estou chamando fotos do SS e depois aqui vou desenhar meus divs.
Então, antes de fazer qualquer coisa com essas imagens você URLs, eu realmente vou me livrar deles e eu vou adicionar
no meu esqueleto envelhecido ad-Din no blog e eu
Então eu realmente vou dar-lhes um I. D. basta chamar um.
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
é apenas dar-lhes uma cor de fundo
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
de 100 pixels.
Então, quando eu faço isso, eu o abrir no navegador.
Nós temos dois divs um após o outro.
Lembre-se que eles se inspecionamos.
Eles são basicamente configurados para que eles levem sua própria linha seu elemento de nível de bloco.
Então, se eu não quiser que isso aconteça, o que vamos fazer para a grade de imagem, queremos
que nossas imagens formem uma grade ou vários estão na mesma linha.
E se assim for, se eu quiser fazer isso com divs eu preciso usar uma propriedade chamada flutuante ou essa
é uma maneira que eu posso conseguir.
Então, aqui, tudo o que faço é flutuador seguro e o que isso fará.
Isso levará os elementos de todas as divs para fora do fluxo normal do documento.
Portanto, existem pilhas atualmente em cada uma em linhas separadas.
E o que acontecerá é que eles flutuam para a esquerda para pensar nisso como a gravidade desaparecendo quase em
nosso documento.
E então esta div vai flutuar e empurrar para a esquerda.
Contra isso.
Então, se eu estivesse fresco aqui, você pode ver que eles estão agora na mesma linha.
imagens para que possamos obter imagens basicamente para cima e formar uma grade.
Então, vamos usar este princípio quando estamos usando
Então eu vou me livrar de tudo isso agora e livrar-me do dispositivo que temos e eu vou adicionar
em nossa imagem assim.
Então, eu vou fazer essa tela cheia e apenas colar nesses links de imagens que
estejam incluídos nesse arquivo.
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
cole-o em nove vezes, o que deve ser muito lento.
cada linha e então eu vou apenas digitar iguais de fonte de imagem e depois passar para o final da linha.
Eu vou usar um pouco de magia sublime aqui onde eu estou usando o comando clique para selecionar o início de
Então eu usei um comando para a seta para a direita, a seta para a esquerda leva para o
começo, o comando corre para o final e então eu vou terminar com a cotação e depois o suporte de fechamento.
Então, essa foi uma maneira muito fácil e rápida de incluir todos aqueles que você é Elfos como tags de imagem.
Então, se eu salvar isso e eles vão para o navegador, você verá quando eu atualizar.
Agora temos nove imagens.
Claro que não estão integrados.
Eles estão ocupando muito espaço.
Então, o que vamos fazer agora é ir para a nossa folha de estilos e selecionar todas as imagens.
E a primeira coisa que provavelmente queremos fazer aqui é apenas dar-lhes.
Então, vamos dar-lhes um como com 100 pixels para começar e isso será muito pequeno.
Mas eu quero que você veja o que acontece e atualize e você notará que todas essas imagens agora estão em
uma linha juntas, mas que há algum espaçamento entre elas que não especificamos.
Nunca estabelecemos margem ou preenchimento ou qualquer coisa.
Então, o que está acontecendo é que, na verdade, há um espaço em branco que está sendo adicionado e é um pouco
peculiar em uma coruja de vapor.
Mas quando temos imagens sem mais nada, há um espaço em branco ou apenas um espaço que é
adicionado entre estes.
Então, se quisermos nos livrar disso, podemos usar o flutuador e lembre-se de que o flutuador tirará as
coisas do fluxo do documento.
Então, se eu atualizar Agora, você pode ver que as imagens estão se encostando umas às outras e basicamente
não há espaço entre elas.
E então podemos voltar e adicionar esse espaço em nós mesmos.
Então, obviamente, não queremos que eles ocupem este pequeno espaço.
Nós queremos que três atravessem e queremos alguma margem entre eles, mas queremos controlar isso.
Então, ao flutuar, livramos o espaço em branco que o navegador nos adicionou para que possamos entrar
em nosso próprio espaçamento personalizado usando a propriedade da margem em vez de espaços em branco reais.
Então agora vamos mudar a largura e vamos começar com 30%.
Então lembre-se que a porcentagem de Israel é relativa aos elementos pai do corpo.
Então, cada um irá ocupar 30% do corpo.
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.
Em minha mente e você verá que nós conseguimos que três deles atravessam nenhum espaço entre eles.
E então nós temos nossos 10 por cento aqui porque isso é apenas 90 por cento que estamos assumindo.
Então, vamos usar essa outra porcentagem para realmente dividir a margem e adicionar algum espaçamento entre
eles.
Então já temos uma grade três por três.
O que queremos fazer em seguida é fazer com que pareça com isso.
Ou temos o espaçamento entre eles.
Então nós realmente temos que fazer um pouco de matemática.
Então eu já fiz isso.
Mas, basicamente, se calcularmos isso, há uma margem aqui, também há uma margem aqui.
Há uma margem aqui três.
E então sobre este para esse sobre este cinco.
E sobre este um ou seis.
Então, temos 10 por cento e precisamos dividir isso em 6 e 10 divididos por seis é um ponto seis seis.
Então, o que vamos fazer é dizer margem de um ponto seis seis por cento.
Então, se voltarmos para o navegador e verificar o resultado e atualizar, verá que
obtemos três imagens uniformemente espaçadas com espaçamento entre eles.
Então, a matemática só atingiu isso mais uma vez.
Cada um deles é de 10 por cento.
Então eles dão apenas 30%.
E cada um tem uma margem de 1. 6 por cento de cada lado.
Então, levamos os dois lados para a esquerda e para a direita um ponto seis vezes dois mais 30 por cento e
recebemos trinta e três pontos por cada um desses.
Então, esse é um terço exatamente ou quase exatamente, estamos arredondando, mas isso é o melhor que podemos fazer aqui.
Então trinta e três pontos três por cento.
Cada um destes podemos inspecionar apenas para verificar isso.
Aqui vamos nós.
Você pode ver que ele ocupa exatamente um terço