1
00:00:00,760 --> 00:00:01,370
D'ACCORD.

2
00:00:01,620 --> 00:00:05,960
Donc, dans cette vidéo, nous allons recréer cet exercice tic tac toe conseil à partir de zéro.

3
00:00:06,060 --> 00:00:09,120
Nous allons donc commencer dès le début par un fichier vide.

4
00:00:09,130 --> 00:00:13,880
I Coppermine que HVM l peut ajouter dans notre plaque de chaudière.

5
00:00:14,460 --> 00:00:21,210
Il suffit d'appeler T T T conseil et la façon dont cela fonctionne juste pour votre mémoire.

6
00:00:21,420 --> 00:00:22,550
C'est une table.

7
00:00:22,560 --> 00:00:23,950
Tout ça, c'est une table.

8
00:00:24,000 --> 00:00:30,330
Il a trois rangées un deux et trois et chaque rangée a trois Tweedy.

9
00:00:30,360 --> 00:00:32,270
Nous nous retrouvons ainsi avec un conseil trois par trois.

10
00:00:32,430 --> 00:00:42,890
Et puis ce que nous allons faire est d'aller dans et sur ces trois téléviseurs, nous allons tourner à gauche et à droite frontière sur et puis sur ces trois nous allons tourner la frontière supérieure et inférieure.

11
00:00:43,560 --> 00:00:48,020
Nous devons donc commencer par notre table et ensuite par trois niveaux.

12
00:00:48,810 --> 00:00:53,490
Et je vais aller faire trois tiaras et faire les t D'abord.

13
00:00:53,520 --> 00:01:01,450
Nous avons donc trois téléviseurs et nous allons les reproduire une fois de plus.

14
00:01:01,590 --> 00:01:06,650
Maintenant nous avons nos trois rangées avec trois éléments trois téléviseurs dans chacun.

15
00:01:06,720 --> 00:01:12,940
Nous allons donc enregistrer cela et si nous l'ouvrons dans le navigateur, vous remarquerez que nous ne voyons rien.

16
00:01:13,500 --> 00:01:18,860
Et c'est parce que même si notre table est là il ya tout d'abord il n'y a rien dans notre table.

17
00:01:18,900 --> 00:01:25,910
Et puis aussi nous n'avons pas de styles appliqués car il est possible d'avoir une table vide et de voir encore ce qui est réellement ce que c'est ici.

18
00:01:25,910 --> 00:01:27,950
Il n'y a pas de données dans ces tableaux.

19
00:01:28,080 --> 00:01:32,700
Dans cet exemple, il s'agit d'une table, puis d'un style.

20
00:01:32,700 --> 00:01:34,790
Donc cela a une avec elle a une frontière.

21
00:01:34,980 --> 00:01:36,320
Nous devons donc le faire.

22
00:01:36,360 --> 00:01:45,210
Donc, juste pour vous prouver que c'est ici, nous allons ajouter un peu de style et je vais le faire dans une étiquette de style cette fois que vous devriez savoir à ce jour.

23
00:01:45,360 --> 00:01:59,370
Ce n'est pas une bonne idée à long terme, mais juste pour une vidéo de solution juste pour la facilité d'observation ici afin qu'ils n'aient pas à me regarder flip entre les fichiers et de se confondre sur ce qui va où je vais faire dans un Fichier ici en haut dans la balise de style.

24
00:01:59,880 --> 00:02:22,920
Donc, la première chose que je vais faire est de simplement sélectionner les T et leur donner une largeur et c'est parce que maintenant si nous avons inspecté les TT vous verriez qu'ils sont fondamentalement pas du tout.

25
00:02:22,930 --> 00:02:24,830
Ils sont deux pixels par deux pixels.

26
00:02:24,960 --> 00:02:30,680
Donc, ils sont vraiment très petits et c'est parce qu'il n'y a rien là et nous ne leur avons pas assigné un avec ou une hauteur.

27
00:02:30,690 --> 00:02:43,130
Donc ce que je veux faire est de leur donner une largeur et nous allons commencer avec 100 pixels et ensuite nous allons faire la même chose pour la hauteur et nous enregistrer et actualiser et nous ne voyons toujours rien.

28
00:02:43,500 --> 00:02:46,860
Et encore une fois, c'est parce que nous ne leur avons rien donné à afficher.

29
00:02:47,010 --> 00:02:55,380
Mais si nous allons inspecter maintenant, nous pouvons voir chaque Tedy est maintenant un carré de 100 par 100 pixels.

30
00:02:55,380 --> 00:02:59,160
Alors allons leur donner un arrière-plan juste pour que vous puissiez voir qu'ils sont là.

31
00:02:59,310 --> 00:03:02,330
Dites les fonds d'écran rose sauver.

32
00:03:03,000 --> 00:03:05,970
Et maintenant, nous pouvons voir que nous avons les débuts de notre conseil.

33
00:03:06,120 --> 00:03:08,360
Donc, je vais vraiment annuler cette couleur de fond.

34
00:03:08,370 --> 00:03:11,400
Je voulais simplement vous montrer que les tuiles sont là.

35
00:03:11,400 --> 00:03:12,630
Nous avons nos téléviseurs.

36
00:03:12,930 --> 00:03:18,750
Et maintenant, ce que nous devons faire est de savoir comment sélectivement tourner sur la frontière.

37
00:03:18,930 --> 00:03:22,800
Nous allons donc commencer sur ces trois éléments.

38
00:03:22,800 --> 00:03:25,380
Nous voulons tourner à gauche et à droite.

39
00:03:25,380 --> 00:03:26,990
Donc, si je rafraîchis la page.

40
00:03:27,140 --> 00:03:36,310
Mais commençons par prendre ce top un ici et en lui donnant un quart gauche et un droit.

41
00:03:36,480 --> 00:03:40,990
Donc je vais y aller et c'est la deuxième TD au lieu de la première TR.

42
00:03:41,070 --> 00:03:52,120
Je vais juste lui donner une classe et je vais juste appeler celui-ci vertical et je vais faire une classe pour ces trois appelé vertical où nous obtenons juste les frontières gauche et droite.

43
00:03:52,320 --> 00:03:53,820
Ainsi, la classe est égale à la verticale.

44
00:03:53,820 --> 00:04:11,570
Et puis ici nous allons sélectionner vertical et juste lui donner une frontière à gauche et nous allons faire un pixel noir pour l'instant et faire la même chose pour la frontière.

45
00:04:11,570 --> 00:04:12,530
Droite.

46
00:04:12,780 --> 00:04:18,280
Et si nous économisons et nous sommes frais vous verrez que nous avons la première place remplie.

47
00:04:18,690 --> 00:04:23,520
Donc maintenant, nous devons ajouter le t d qui est en dessous de celui-ci et le téléviseur qui est en dessous de celui.

48
00:04:23,790 --> 00:04:29,020
Et c'est pourquoi je l'ai fait une classe parce que nous allons l'utiliser plus d'une fois.

49
00:04:29,220 --> 00:04:45,730
Donc, plutôt que de faire de cette un ID et puis faire un autre ID pour cet élément et un autre ID pour celui-ci que je pourrais avoir fait, je pourrais avoir fait quelque chose comme ID milieu et puis celui-ci être id milieu fond ou quelque chose.

50
00:04:46,530 --> 00:04:49,570
Eh bien, je peux avoir un espace là-bas, mais quelque chose comme ça.

51
00:04:49,680 --> 00:04:51,760
Ce n'est en fait pas une bonne idée.

52
00:04:51,780 --> 00:04:57,410
Nous ne voulons pas avoir l'identification multiple ainsi Im juste allant lui donner une classe et alors notre classe est verticale.

53
00:04:57,660 --> 00:05:01,350
Donc, je vais le donner à celui-ci aussi.

54
00:05:01,560 --> 00:05:04,280
C'est notre élément central qui est juste en dessous.

55
00:05:04,440 --> 00:05:07,440
Et puis l'autre qui est en dessous.

56
00:05:07,440 --> 00:05:13,000
Donc ces trois ont maintenant la classe verticale et vous pouvez voir que nous obtenons nos trois lignes verticales.

57
00:05:13,650 --> 00:05:17,770
Donc nous avons maintenant besoin de répéter le même processus sur les lignes horizontales.

58
00:05:18,570 --> 00:05:20,740
Nous voulons donc cet élément ici.

59
00:05:20,850 --> 00:05:26,250
Celui-ci ici et celui-ci ici pour avoir un haut de frontière et un fond de frontière.

60
00:05:26,670 --> 00:05:45,270
Donc, cette fois, je vais commencer avec la classe et nous obtenons une horizontale et underspin une copie de ce sauf changement frontière gauche à la frontière haut et bas de la frontière et puis tout ce que nous devons faire est de signer cette classe horizontale avec les éléments corrects.

61
00:05:45,270 --> 00:05:52,260
Donc ceux que nous voulons que ce soit sur celui-ci ici, donc ce sera le premier T.T.

62
00:05:52,260 --> 00:05:54,500
Dans le deuxième TR.

63
00:05:54,870 --> 00:05:56,100
Je vais donc aller de l'avant et le faire.

64
00:05:56,100 --> 00:06:01,420
Classe égale ou est sur TL et copier cela.

65
00:06:01,440 --> 00:06:09,910
Ensuite, nous le voulons dans ce milieu ici et vous verrez que nous avons déjà une classe verticale et nous n'avons pas vraiment vu cela avant où nous avons plus d'une classe.

66
00:06:09,930 --> 00:06:10,910
C'est vraiment facile.

67
00:06:10,920 --> 00:06:13,880
Tout ce que nous faisons, c'est d'ajouter un espace.

68
00:06:13,890 --> 00:06:16,350
Ce n'est donc pas une classe appelée horizontale verticale.

69
00:06:16,350 --> 00:06:19,780
Il est deux vertical et aussi horizontal.

70
00:06:20,190 --> 00:06:31,840
Et puis nous ferons la même chose pour ce dernier CD qui serait celui-ci ici et si nous économisons et nous rafraîchissons la page, nous avons maintenant notre tic tac fini.

71
00:06:31,950 --> 00:06:38,800
Donc, la toute dernière chose que je veux faire ici est tout simplement déplacer ce plus de sorte qu'il est centré et c'est vraiment très facile.

72
00:06:38,910 --> 00:06:42,460
C'est juste une ligne de succès sur notre table.

73
00:06:42,720 --> 00:06:47,820
Nous allons lui donner une marge d'ordre et nous y sommes.

74
00:06:47,850 --> 00:06:49,820
Cette marge est automatiquement calculée.

75
00:06:49,830 --> 00:06:51,270
Vous pouvez voir que je défile.

76
00:06:51,330 --> 00:07:08,520
Je veux dire que je redimensionne la fenêtre qui augmente et diminue les marges, puis une dernière chose si nous voulons ajouter que chacun dans le haut qui dit juste tic tac toe peut le faire.

77
00:07:08,550 --> 00:07:12,690
Mais vous remarquerez que cet élément Phi inspecté.

78
00:07:13,200 --> 00:07:16,480
Eh bien, vous pouvez voir sans même l'inspecter que c'est tout le chemin sur le côté.

79
00:07:16,650 --> 00:07:22,900
Donc, si je voulais aller dans le milieu de l'élément prend réellement tout le chemin à travers l'écran.

80
00:07:23,150 --> 00:07:24,620
Vous pouvez voir ce bleu ici.

81
00:07:24,870 --> 00:07:31,980
Donc, je peux simplement centrer le texte et cela nous donnera l'effet que le H-1 est en fait au milieu.

82
00:07:31,980 --> 00:07:40,720
Donc, je juste le texte H-1 aligner centre et je sauver.