D'ACCORD.
Donc, dans cette vidéo, nous allons recréer cet exercice tic tac toe conseil à partir de zéro.
Nous allons donc commencer dès le début par un fichier vide.
I Coppermine que HVM l peut ajouter dans notre plaque de chaudière.
Il suffit d'appeler T T T conseil et la façon dont cela fonctionne juste pour votre mémoire.
C'est une table.
Tout ça, c'est une table.
Il a trois rangées un deux et trois et chaque rangée a trois Tweedy.
Nous nous retrouvons ainsi avec un conseil trois par trois.
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.
Nous devons donc commencer par notre table et ensuite par trois niveaux.
Et je vais aller faire trois tiaras et faire les t D'abord.
Nous avons donc trois téléviseurs et nous allons les reproduire une fois de plus.
Maintenant nous avons nos trois rangées avec trois éléments trois téléviseurs dans chacun.
Nous allons donc enregistrer cela et si nous l'ouvrons dans le navigateur, vous remarquerez que nous ne voyons rien.
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.
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.
Il n'y a pas de données dans ces tableaux.
Dans cet exemple, il s'agit d'une table, puis d'un style.
Donc cela a une avec elle a une frontière.
Nous devons donc le faire.
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.
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.
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.
Ils sont deux pixels par deux pixels.
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.
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.
Et encore une fois, c'est parce que nous ne leur avons rien donné à afficher.
Mais si nous allons inspecter maintenant, nous pouvons voir chaque Tedy est maintenant un carré de 100 par 100 pixels.
Alors allons leur donner un arrière-plan juste pour que vous puissiez voir qu'ils sont là.
Dites les fonds d'écran rose sauver.
Et maintenant, nous pouvons voir que nous avons les débuts de notre conseil.
Donc, je vais vraiment annuler cette couleur de fond.
Je voulais simplement vous montrer que les tuiles sont là.
Nous avons nos téléviseurs.
Et maintenant, ce que nous devons faire est de savoir comment sélectivement tourner sur la frontière.
Nous allons donc commencer sur ces trois éléments.
Nous voulons tourner à gauche et à droite.
Donc, si je rafraîchis la page.
Mais commençons par prendre ce top un ici et en lui donnant un quart gauche et un droit.
Donc je vais y aller et c'est la deuxième TD au lieu de la première TR.
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.
Ainsi, la classe est égale à la verticale.
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.
Droite.
Et si nous économisons et nous sommes frais vous verrez que nous avons la première place remplie.
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.
Et c'est pourquoi je l'ai fait une classe parce que nous allons l'utiliser plus d'une fois.
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.
Eh bien, je peux avoir un espace là-bas, mais quelque chose comme ça.
Ce n'est en fait pas une bonne idée.
Nous ne voulons pas avoir l'identification multiple ainsi Im juste allant lui donner une classe et alors notre classe est verticale.
Donc, je vais le donner à celui-ci aussi.
C'est notre élément central qui est juste en dessous.
Et puis l'autre qui est en dessous.
Donc ces trois ont maintenant la classe verticale et vous pouvez voir que nous obtenons nos trois lignes verticales.
Donc nous avons maintenant besoin de répéter le même processus sur les lignes horizontales.
Nous voulons donc cet élément ici.
Celui-ci ici et celui-ci ici pour avoir un haut de frontière et un fond de frontière.
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.
Donc ceux que nous voulons que ce soit sur celui-ci ici, donc ce sera le premier T.T.
Dans le deuxième TR.
Je vais donc aller de l'avant et le faire.
Classe égale ou est sur TL et copier cela.
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.
C'est vraiment facile.
Tout ce que nous faisons, c'est d'ajouter un espace.
Ce n'est donc pas une classe appelée horizontale verticale.
Il est deux vertical et aussi horizontal.
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.
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.
C'est juste une ligne de succès sur notre table.
Nous allons lui donner une marge d'ordre et nous y sommes.
Cette marge est automatiquement calculée.
Vous pouvez voir que je défile.
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.
Mais vous remarquerez que cet élément Phi inspecté.
Eh bien, vous pouvez voir sans même l'inspecter que c'est tout le chemin sur le côté.
Donc, si je voulais aller dans le milieu de l'élément prend réellement tout le chemin à travers l'écran.
Vous pouvez voir ce bleu ici.
Donc, je peux simplement centrer le texte et cela nous donnera l'effet que le H-1 est en fait au milieu.
Donc, je juste le texte H-1 aligner centre et je sauver.