1
00:00:00,760 --> 00:00:01,370
ESTÁ BEM.

2
00:00:01,620 --> 00:00:05,960
Então, neste vídeo, vamos recriar este tic tac toe bordo de exercícios a partir do zero.

3
00:00:06,060 --> 00:00:09,120
Então vamos começar desde o início com um arquivo vazio.

4
00:00:09,130 --> 00:00:13,880
I Coppermine board que HVM eu posso adicionar na nossa placa de caldeira.

5
00:00:14,460 --> 00:00:21,210
Só vou chamá-lo de T T T board e da maneira que isso funciona apenas para tropeçar sua memória.

6
00:00:21,420 --> 00:00:22,550
É uma mesa.

7
00:00:22,560 --> 00:00:23,950
Tudo isso é uma mesa.

8
00:00:24,000 --> 00:00:30,330
Possui três linhas um e três e cada linha tem três Tweedy.

9
00:00:30,360 --> 00:00:32,270
Então, acabamos com uma placa três por três.

10
00:00:32,430 --> 00:00:38,760
E então, o que faremos é entrar e entrar nessas três TVs, vamos virar fronteira esquerda e direita e, em

11
00:00:39,390 --> 00:00:42,890
seguida, sobre estas três, vamos virar a borda superior e inferior.

12
00:00:43,560 --> 00:00:48,020
Então, precisamos começar com nossa tabela e depois com três camadas.

13
00:00:48,810 --> 00:00:53,490
E eu realmente vou fazer três tiaras e fazer as primeiras.

14
00:00:53,520 --> 00:00:56,400
Então, nós temos três TVs e então vamos

15
00:00:59,340 --> 00:01:01,450
duplicar isso mais uma vez.

16
00:01:01,590 --> 00:01:06,650
Agora temos nossas três linhas com três elementos de três TVs em cada um.

17
00:01:06,720 --> 00:01:12,940
Então, vamos economizar isso e se abrimos isso no navegador, você notará que não vemos nada.

18
00:01:13,500 --> 00:01:18,600
E isso é porque mesmo que a nossa mesa esteja lá, primeiro é que não há nada na nossa mesa.

19
00:01:18,900 --> 00:01:23,910
E então também não temos nenhum estilo aplicado porque é possível ter uma tabela vazia e ainda ver coisas

20
00:01:23,910 --> 00:01:25,910
que são realmente o que é aqui.

21
00:01:25,910 --> 00:01:27,950
Não há dados nessas tabelas.

22
00:01:28,080 --> 00:01:32,700
Neste exemplo, aqui é apenas uma mesa e, em seguida, está com estilo.

23
00:01:32,700 --> 00:01:34,790
Então, isso tem um com ele tem uma borda.

24
00:01:34,980 --> 00:01:36,320
Então precisamos fazer isso.

25
00:01:36,360 --> 00:01:42,120
Então, apenas para provar para você, porém, é aqui vamos adicionar algum estilo e eu vou fazer isso em uma

26
00:01:42,120 --> 00:01:45,210
tag de estilo desta vez que você deve saber até agora.

27
00:01:45,360 --> 00:01:51,170
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,

28
00:01:51,170 --> 00:01:55,960
então eles não precisam me ver folhear entre arquivos e se confundir sobre o que acontece onde eu

29
00:01:55,970 --> 00:01:59,370
vou fazer apenas em um Arquive aqui no topo da etiqueta de estilo.

30
00:01:59,880 --> 00:02:09,540
Então, a primeira coisa que vou fazer é selecionar os T e dar-lhes uma largura e é por isso que, agora,

31
00:02:09,540 --> 00:02:11,550
se inspecionássemos os TT,

32
00:02:19,380 --> 00:02:22,920
você veria que eles basicamente não estão lá.

33
00:02:22,930 --> 00:02:24,830
São dois pixels por dois pixels.

34
00:02:24,960 --> 00:02:28,720
Então eles são realmente muito pequenos e é porque não há nada lá e nós

35
00:02:28,770 --> 00:02:30,680
não lhes atribuímos um com ou uma altura.

36
00:02:30,690 --> 00:02:36,570
Então, o que eu quero fazer é dar-lhes uma largura e vamos começar com 100 pixels

37
00:02:36,570 --> 00:02:43,130
e então vamos fazer o mesmo por altura e economizamos e atualizamos e ainda não vemos nada.

38
00:02:43,500 --> 00:02:46,860
E novamente, é porque não lhes demos nada para exibir.

39
00:02:47,010 --> 00:02:55,380
Mas se vamos inspecionar agora podemos ver cada Tedy agora é um quadrado de 100 por 100 pixels.

40
00:02:55,380 --> 00:02:59,160
Então, vamos dar-lhes um histórico para que você possa ver que eles estão lá.

41
00:02:59,310 --> 00:03:02,330
Diga os antecedentes rosa salvar.

42
00:03:03,000 --> 00:03:05,970
E agora podemos ver que temos o começo do nosso conselho.

43
00:03:06,120 --> 00:03:08,360
Então, eu realmente vou desfazer essa cor de fundo.

44
00:03:08,370 --> 00:03:11,400
Eu só queria mostrar-lhe que os azulejos estão lá.

45
00:03:11,400 --> 00:03:12,630
Nós temos nossas TVs.

46
00:03:12,930 --> 00:03:18,750
E agora o que precisamos fazer é descobrir como ativar seletivamente a borda.

47
00:03:18,930 --> 00:03:22,800
Então vamos começar com esses três elementos.

48
00:03:22,800 --> 00:03:25,380
Queremos ativar o limite esquerdo e direito.

49
00:03:25,380 --> 00:03:26,990
Então, se eu atualizar a página.

50
00:03:27,140 --> 00:03:36,310
Mas vamos começar tomando este top aqui e dando um quarto à esquerda e à direita.

51
00:03:36,480 --> 00:03:40,990
Então eu vou e esse é o segundo TD em vez do primeiro TR.

52
00:03:41,070 --> 00:03:47,250
Eu só vou dar uma aula e só vou chamar essa vertical e vou fazer uma aula para

53
00:03:47,250 --> 00:03:52,120
estes três chamados de verticais, onde acabamos de obter as fronteiras esquerda e direita.

54
00:03:52,320 --> 00:03:53,820
Então a classe é igual à vertical.

55
00:03:53,820 --> 00:04:00,240
E então, aqui vamos selecionar vertical e simplesmente dar uma fronteira para a esquerda

56
00:04:04,560 --> 00:04:11,570
e vamos fazer um pixel preto por agora e fazer o mesmo para a borda.

57
00:04:11,570 --> 00:04:12,530
Certo.

58
00:04:12,780 --> 00:04:18,280
E se salvarmos e estamos frescos, você verá que temos o primeiro quadrado concluído.

59
00:04:18,690 --> 00:04:23,520
Então agora precisamos adicionar o t d abaixo e a TV abaixo.

60
00:04:23,790 --> 00:04:29,020
E é por isso que fiz uma aula porque vamos usá-lo mais de uma vez.

61
00:04:29,220 --> 00:04:34,800
Então, ao invés de fazer isso uma ID e, em seguida, fazer outra identificação para este

62
00:04:34,800 --> 00:04:40,840
elemento e outra ID para essa que eu poderia ter feito, eu poderia ter feito algo como

63
00:04:40,850 --> 00:04:45,730
o meio ID e, em seguida, este seria um meio fundo ou algo assim.

64
00:04:46,530 --> 00:04:49,570
Bem, eu posso ter um espaço lá, mas algo assim.

65
00:04:49,680 --> 00:04:51,760
Isso na verdade não é uma ótima idéia.

66
00:04:51,780 --> 00:04:57,120
Nós não queremos ter uma ID múltipla, então eu vou dar uma aula e nossa classe é vertical.

67
00:04:57,660 --> 00:05:01,350
Então vou dar isso a este também.

68
00:05:01,560 --> 00:05:04,280
Este é o nosso elemento médio que está bem abaixo dele.

69
00:05:04,440 --> 00:05:07,440
E então o outro que está abaixo disso.

70
00:05:07,440 --> 00:05:13,000
Então, esses três agora têm classe vertical e você pode ver nossas três linhas verticais.

71
00:05:13,650 --> 00:05:17,770
Então, agora, precisamos repetir o mesmo processo nas linhas horizontais.

72
00:05:18,570 --> 00:05:20,740
E então queremos esse elemento aqui.

73
00:05:20,850 --> 00:05:26,250
Este aqui e este aqui para ter uma borda superior e um limite inferior.

74
00:05:26,670 --> 00:05:34,590
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

75
00:05:34,590 --> 00:05:43,080
esquerda para a parte superior da borda e a parte inferior da borda, e então tudo o que precisamos fazer é assinar esta

76
00:05:43,080 --> 00:05:45,270
classe horizontal com os elementos corretos.

77
00:05:45,270 --> 00:05:52,260
Então, aqueles que queremos que estejam este são aqui mesmo, então esse será o primeiro T. T.

78
00:05:52,260 --> 00:05:54,500
no segundo TR.

79
00:05:54,870 --> 00:05:56,100
Então, eu vou seguir em frente e fazer isso.

80
00:05:56,100 --> 00:06:01,420
A classe é igual ou está em TL e copia isso.

81
00:06:01,440 --> 00:06:07,320
Então nós queremos isso neste meio aqui e você verá que já temos uma classe vertical e na verdade não vimos

82
00:06:07,320 --> 00:06:09,910
isso antes de onde temos mais de uma classe.

83
00:06:09,930 --> 00:06:10,910
É muito fácil.

84
00:06:10,920 --> 00:06:13,880
Tudo o que fazemos é adicionar um espaço.

85
00:06:13,890 --> 00:06:16,350
Portanto, esta não é uma classe chamada vertical horizontal.

86
00:06:16,350 --> 00:06:19,780
É dois verticais e também horizontais.

87
00:06:20,190 --> 00:06:27,030
E então, faremos o mesmo para este último CD, que seria este aqui e se nós salvarmos e

88
00:06:27,030 --> 00:06:31,840
atualizamos a página, agora temos o nosso tic tac toe board completo.

89
00:06:31,950 --> 00:06:36,930
Então, a última coisa que eu quero fazer aqui é apenas mover isso para que seja centrado

90
00:06:36,930 --> 00:06:38,800
e na verdade é realmente fácil.

91
00:06:38,910 --> 00:06:42,460
É apenas uma linha de sucesso em nossa mesa.

92
00:06:42,720 --> 00:06:47,820
Nós vamos dar uma margem de ordem e aí vamos.

93
00:06:47,850 --> 00:06:49,820
Essa margem é calculada automaticamente.

94
00:06:49,830 --> 00:06:51,270
Você pode ver como eu rolo.

95
00:06:51,330 --> 00:06:57,140
como eu redimensionar a janela que as margens aumentam e diminuem e, em seguida, uma

96
00:06:57,150 --> 00:07:04,440
última coisa, se quisermos acrescentar que cada um no topo que apenas diz que tic tac toe pode fazer isso.

97
00:07:07,620 --> 00:07:08,520
Quero dizer,

98
00:07:08,550 --> 00:07:12,690
Mas você notará que esse elemento que o Phi inspecionou.

99
00:07:13,200 --> 00:07:16,480
Bem, você pode ver, sem mesmo inspecionar que é todo o caminho do lado.

100
00:07:16,650 --> 00:07:22,900
Então, se eu quisesse entrar no meio, o elemento realmente ocupa todo o caminho da tela.

101
00:07:23,150 --> 00:07:24,620
Você pode ver este azul aqui.

102
00:07:24,870 --> 00:07:31,710
Então eu posso apenas centrar o texto e isso nos dará o efeito de que o H-1 está realmente no meio.

103
00:07:31,980 --> 00:07:40,720
Então eu apenas o texto H-1 alinha o centro e eu salvei.

104
00:07:41,130 --> 00:07:43,230
E aí, nós temos um tic tac toe board