ESTÁ BEM.
Então, neste vídeo, vamos recriar este tic tac toe bordo de exercícios a partir do zero.
Então vamos começar desde o início com um arquivo vazio.
I Coppermine board que HVM eu posso adicionar na nossa placa de caldeira.
Só vou chamá-lo de T T T board e da maneira que isso funciona apenas para tropeçar sua memória.
É uma mesa.
Tudo isso é uma mesa.
Possui três linhas um e três e cada linha tem três Tweedy.
Então, acabamos com uma placa três por três.
E então, o que faremos é entrar e entrar nessas três TVs, vamos virar fronteira esquerda e direita e, em
seguida, sobre estas três, vamos virar a borda superior e inferior.
Então, precisamos começar com nossa tabela e depois com três camadas.
E eu realmente vou fazer três tiaras e fazer as primeiras.
Então, nós temos três TVs e então vamos
duplicar isso mais uma vez.
Agora temos nossas três linhas com três elementos de três TVs em cada um.
Então, vamos economizar isso e se abrimos isso no navegador, você notará que não vemos nada.
E isso é porque mesmo que a nossa mesa esteja lá, primeiro é que não há nada na nossa mesa.
E então também não temos nenhum estilo aplicado porque é possível ter uma tabela vazia e ainda ver coisas
que são realmente o que é aqui.
Não há dados nessas tabelas.
Neste exemplo, aqui é apenas uma mesa e, em seguida, está com estilo.
Então, isso tem um com ele tem uma borda.
Então precisamos fazer isso.
Então, apenas para provar para você, porém, é aqui vamos adicionar algum estilo e eu vou fazer isso em uma
tag de estilo desta vez que você deve saber até agora.
Não é uma ótima idéia no longo prazo, mas apenas para um vídeo de solução apenas por ter facilidade para assistir aqui,
então eles não precisam me ver folhear entre arquivos e se confundir sobre o que acontece onde eu
vou fazer apenas em um Arquive aqui no topo da etiqueta de estilo.
Então, a primeira coisa que vou fazer é selecionar os T e dar-lhes uma largura e é por isso que, agora,
se inspecionássemos os TT,
você veria que eles basicamente não estão lá.
São dois pixels por dois pixels.
Então eles são realmente muito pequenos e é porque não há nada lá e nós
não lhes atribuímos um com ou uma altura.
Então, o que eu quero fazer é dar-lhes uma largura e vamos começar com 100 pixels
e então vamos fazer o mesmo por altura e economizamos e atualizamos e ainda não vemos nada.
E novamente, é porque não lhes demos nada para exibir.
Mas se vamos inspecionar agora podemos ver cada Tedy agora é um quadrado de 100 por 100 pixels.
Então, vamos dar-lhes um histórico para que você possa ver que eles estão lá.
Diga os antecedentes rosa salvar.
E agora podemos ver que temos o começo do nosso conselho.
Então, eu realmente vou desfazer essa cor de fundo.
Eu só queria mostrar-lhe que os azulejos estão lá.
Nós temos nossas TVs.
E agora o que precisamos fazer é descobrir como ativar seletivamente a borda.
Então vamos começar com esses três elementos.
Queremos ativar o limite esquerdo e direito.
Então, se eu atualizar a página.
Mas vamos começar tomando este top aqui e dando um quarto à esquerda e à direita.
Então eu vou e esse é o segundo TD em vez do primeiro TR.
Eu só vou dar uma aula e só vou chamar essa vertical e vou fazer uma aula para
estes três chamados de verticais, onde acabamos de obter as fronteiras esquerda e direita.
Então a classe é igual à vertical.
E então, aqui vamos selecionar vertical e simplesmente dar uma fronteira para a esquerda
e vamos fazer um pixel preto por agora e fazer o mesmo para a borda.
Certo.
E se salvarmos e estamos frescos, você verá que temos o primeiro quadrado concluído.
Então agora precisamos adicionar o t d abaixo e a TV abaixo.
E é por isso que fiz uma aula porque vamos usá-lo mais de uma vez.
Então, ao invés de fazer isso uma ID e, em seguida, fazer outra identificação para este
elemento e outra ID para essa que eu poderia ter feito, eu poderia ter feito algo como
o meio ID e, em seguida, este seria um meio fundo ou algo assim.
Bem, eu posso ter um espaço lá, mas algo assim.
Isso na verdade não é uma ótima idéia.
Nós não queremos ter uma ID múltipla, então eu vou dar uma aula e nossa classe é vertical.
Então vou dar isso a este também.
Este é o nosso elemento médio que está bem abaixo dele.
E então o outro que está abaixo disso.
Então, esses três agora têm classe vertical e você pode ver nossas três linhas verticais.
Então, agora, precisamos repetir o mesmo processo nas linhas horizontais.
E então queremos esse elemento aqui.
Este aqui e este aqui para ter uma borda superior e um limite inferior.
Então, desta vez, eu vou começar com a aula e obtemos uma visão horizontal e sublinha uma cópia, exceto mudar a margem
esquerda para a parte superior da borda e a parte inferior da borda, e então tudo o que precisamos fazer é assinar esta
classe horizontal com os elementos corretos.
Então, aqueles que queremos que estejam este são aqui mesmo, então esse será o primeiro T. T.
no segundo TR.
Então, eu vou seguir em frente e fazer isso.
A classe é igual ou está em TL e copia isso.
Então nós queremos isso neste meio aqui e você verá que já temos uma classe vertical e na verdade não vimos
isso antes de onde temos mais de uma classe.
É muito fácil.
Tudo o que fazemos é adicionar um espaço.
Portanto, esta não é uma classe chamada vertical horizontal.
É dois verticais e também horizontais.
E então, faremos o mesmo para este último CD, que seria este aqui e se nós salvarmos e
atualizamos a página, agora temos o nosso tic tac toe board completo.
Então, a última coisa que eu quero fazer aqui é apenas mover isso para que seja centrado
e na verdade é realmente fácil.
É apenas uma linha de sucesso em nossa mesa.
Nós vamos dar uma margem de ordem e aí vamos.
Essa margem é calculada automaticamente.
Você pode ver como eu rolo.
como eu redimensionar a janela que as margens aumentam e diminuem e, em seguida, uma
última coisa, se quisermos acrescentar que cada um no topo que apenas diz que tic tac toe pode fazer isso.
Quero dizer,
Mas você notará que esse elemento que o Phi inspecionou.
Bem, você pode ver, sem mesmo inspecionar que é todo o caminho do lado.
Então, se eu quisesse entrar no meio, o elemento realmente ocupa todo o caminho da tela.
Você pode ver este azul aqui.
Então eu posso apenas centrar o texto e isso nos dará o efeito de que o H-1 está realmente no meio.
Então eu apenas o texto H-1 alinha o centro e eu salvei.
E aí, nós temos um tic tac toe board