1
00:00:00,760 --> 00:00:01,370
OK.

2
00:00:01,620 --> 00:00:05,960
Quindi in questo video ricreeremo da zero questo esercizio di tris.

3
00:00:06,060 --> 00:00:09,120
Quindi inizieremo dall'inizio con un file vuoto.

4
00:00:09,130 --> 00:00:13,880
I Coppermine board che HVM può aggiungere nel nostro piatto caldaia.

5
00:00:14,460 --> 00:00:21,210
Lo chiamerò T T T board e il modo in cui funziona solo per farti perdere la memoria.

6
00:00:21,420 --> 00:00:22,550
È un tavolo.

7
00:00:22,560 --> 00:00:23,950
Tutta questa cosa è un tavolo.

8
00:00:24,000 --> 00:00:30,330
Ha tre file uno due e tre e ogni fila ha tre Tweedy.

9
00:00:30,360 --> 00:00:32,270
Quindi finiamo con una tavola tre a tre.

10
00:00:32,430 --> 00:00:38,760
E poi quello che faremo è entrare e su questi tre televisori gireremo il bordo sinistro e destro e

11
00:00:39,390 --> 00:00:42,890
poi su questi tre gireremo il bordo superiore e quello inferiore.

12
00:00:43,560 --> 00:00:48,020
Quindi dobbiamo iniziare con il nostro tavolo e poi tre livelli.

13
00:00:48,810 --> 00:00:53,490
E in effetti sto per andare a fare tre diademi e fare i t D's prima.

14
00:00:53,520 --> 00:00:56,400
Quindi otteniamo tre televisori e quindi

15
00:00:59,340 --> 00:01:01,450
duplicheremo ancora una volta.

16
00:01:01,590 --> 00:01:06,650
Ora abbiamo le nostre tre file con tre elementi in tre televisori ciascuno.

17
00:01:06,720 --> 00:01:12,940
Quindi lo salveremo e se lo apriamo nel browser noterai che non vediamo nulla.

18
00:01:13,500 --> 00:01:18,600
E questo perché anche se il nostro tavolo è lì, prima di tutto non c'è niente nel nostro tavolo.

19
00:01:18,900 --> 00:01:23,910
E poi anche non abbiamo applicato alcuno stile perché è possibile avere una tabella vuota e vedere ancora cose

20
00:01:23,910 --> 00:01:25,910
che sono effettivamente ciò che è qui.

21
00:01:25,910 --> 00:01:27,950
Non ci sono dati in queste tabelle.

22
00:01:28,080 --> 00:01:32,700
In questo esempio qui è solo un tavolo e poi è in stile.

23
00:01:32,700 --> 00:01:34,790
Quindi quello ha un con esso ha un confine.

24
00:01:34,980 --> 00:01:36,320
Quindi dobbiamo farlo.

25
00:01:36,360 --> 00:01:42,120
Quindi, solo per dimostrarti che è qui aggiungiamo un po 'di stile e stavolta lo farò in un

26
00:01:42,120 --> 00:01:45,210
tag di stile questa volta che dovresti sapere ormai.

27
00:01:45,360 --> 00:01:51,170
Non è una grande idea a lungo termine, ma solo per un video di soluzione solo per la facilità di guardare qui

28
00:01:51,170 --> 00:01:55,960
in modo che non debbano guardarmi girare tra i file e confondermi su quello che succede dove andrò

29
00:01:55,970 --> 00:01:59,370
a fare in uno file qui in alto nel tag dello stile.

30
00:01:59,880 --> 00:02:09,540
Quindi la prima cosa che farò è selezionare le T e dare loro una larghezza e questo perché proprio ora,

31
00:02:09,540 --> 00:02:11,550
se ispezioniamo i TT,

32
00:02:19,380 --> 00:02:22,920
vedresti che in pratica non sono affatto lì.

33
00:02:22,930 --> 00:02:24,830
Sono due pixel per due pixel.

34
00:02:24,960 --> 00:02:28,720
Quindi sono davvero molto piccoli e questo perché non c'è niente lì e non

35
00:02:28,770 --> 00:02:30,680
li abbiamo assegnati a con o un'altezza.

36
00:02:30,690 --> 00:02:36,570
Quindi quello che voglio fare è dargli una larghezza e inizieremo con 100 pixel e

37
00:02:36,570 --> 00:02:43,130
poi faremo la stessa cosa per l'altezza e salveremo e aggiorneremo e non vediamo ancora nulla.

38
00:02:43,500 --> 00:02:46,860
E ancora perché non abbiamo dato loro nulla da mostrare.

39
00:02:47,010 --> 00:02:55,380
Ma se andiamo a ispezionare ora possiamo vedere che ogni Tedy è ora un quadrato di 100 per 100 pixel.

40
00:02:55,380 --> 00:02:59,160
Quindi andiamo a dare loro uno sfondo solo così puoi vedere che sono lì.

41
00:02:59,310 --> 00:03:02,330
Supponiamo che gli sfondi siano rosa.

42
00:03:03,000 --> 00:03:05,970
E ora possiamo vedere che abbiamo l'inizio della nostra tavola.

43
00:03:06,120 --> 00:03:08,360
Quindi annullerò il colore di sfondo.

44
00:03:08,370 --> 00:03:11,400
Volevo solo mostrarti che le tessere ci sono.

45
00:03:11,400 --> 00:03:12,630
Abbiamo i nostri televisori.

46
00:03:12,930 --> 00:03:18,750
E ora quello che dobbiamo fare è capire come attivare selettivamente il confine.

47
00:03:18,930 --> 00:03:22,800
Quindi inizieremo con questi tre elementi.

48
00:03:22,800 --> 00:03:25,380
Vogliamo girare a sinistra e a destra.

49
00:03:25,380 --> 00:03:26,990
Quindi, se aggiorno la pagina.

50
00:03:27,140 --> 00:03:36,310
Ma iniziamo prendendo quello superiore proprio qui e dandogli un angolo sinistro e uno destro.

51
00:03:36,480 --> 00:03:40,990
Quindi ho intenzione di andare e questo è il secondo TD al posto del primo TR.

52
00:03:41,070 --> 00:03:47,250
Sto solo andando a dargli un corso e lo chiamerò solo verticale e farò una classe

53
00:03:47,250 --> 00:03:52,120
per questi tre chiamati verticale dove otteniamo solo i bordi sinistro e destro.

54
00:03:52,320 --> 00:03:53,820
Quindi la classe è uguale a verticale.

55
00:03:53,820 --> 00:04:00,240
E poi qui selezioneremo la verticale e gli daremo solo un bordo sinistro

56
00:04:04,560 --> 00:04:11,570
e facciamo un pixel nero per ora e facciamo la stessa cosa per il bordo.

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

58
00:04:12,780 --> 00:04:18,280
E se salviamo e siamo freschi vedremo che abbiamo il primo quadrato completato.

59
00:04:18,690 --> 00:04:23,520
Quindi ora abbiamo bisogno di aggiungere il t d che è sotto di esso e il televisore che è al di sotto di quello.

60
00:04:23,790 --> 00:04:29,020
Ed è per questo che ho fatto un corso perché lo useremo più di una volta.

61
00:04:29,220 --> 00:04:34,800
Quindi, piuttosto che rendere questo un ID e poi fare un altro ID per questo

62
00:04:34,800 --> 00:04:40,840
elemento e un altro ID per questo che avrei potuto fare, avrei potuto fare qualcosa come

63
00:04:40,850 --> 00:04:45,730
ID middle e poi questo sarà id middle bottom o qualcosa del genere.

64
00:04:46,530 --> 00:04:49,570
Beh, posso avere uno spazio lì, ma qualcosa del genere.

65
00:04:49,680 --> 00:04:51,760
Questa non è una buona idea.

66
00:04:51,780 --> 00:04:57,120
Non vogliamo avere più ID quindi Im solo intenzione di dargli una classe e quindi la nostra classe è verticale.

67
00:04:57,660 --> 00:05:01,350
Quindi vado a darlo anche a questo.

68
00:05:01,560 --> 00:05:04,280
Questo è il nostro elemento centrale che è proprio sotto di esso.

69
00:05:04,440 --> 00:05:07,440
E poi l'altro che è sotto quello.

70
00:05:07,440 --> 00:05:13,000
Quindi quei tre ora hanno la verticale in classe e puoi vedere che otteniamo le nostre tre linee verticali.

71
00:05:13,650 --> 00:05:17,770
Quindi ora abbiamo solo bisogno di ripetere lo stesso processo sulle linee orizzontali.

72
00:05:18,570 --> 00:05:20,740
E quindi vogliamo questo elemento qui.

73
00:05:20,850 --> 00:05:26,250
Questo qui e questo qui per avere un bordo superiore e un bordo inferiore.

74
00:05:26,670 --> 00:05:34,590
Quindi questa volta inizierò con la classe e otterremo una copia orizzontale e sottostringa di una copia, tranne il

75
00:05:34,590 --> 00:05:43,080
bordo di sinistra a bordo superiore e bordo inferiore e quindi tutto ciò che dobbiamo fare è firmare questa classe

76
00:05:43,080 --> 00:05:45,270
orizzontale con gli elementi corretti.

77
00:05:45,270 --> 00:05:52,260
Quindi quelli che vogliamo che siano su questo sono proprio qui, quindi questo sarà il primo T. T.

78
00:05:52,260 --> 00:05:54,500
nel secondo TR.

79
00:05:54,870 --> 00:05:56,100
Quindi ho intenzione di andare avanti e farlo.

80
00:05:56,100 --> 00:06:01,420
La classe è uguale o è su TL e copia quella.

81
00:06:01,440 --> 00:06:07,320
Poi lo vogliamo in questo mezzo qui e vedrai che abbiamo già una classe verticale e in realtà non l'abbiamo

82
00:06:07,320 --> 00:06:09,910
mai vista prima dove abbiamo più di una classe.

83
00:06:09,930 --> 00:06:10,910
È davvero facile

84
00:06:10,920 --> 00:06:13,880
Tutto ciò che facciamo è aggiungere uno spazio.

85
00:06:13,890 --> 00:06:16,350
Quindi questa non è una classe chiamata verticale orizzontale.

86
00:06:16,350 --> 00:06:19,780
È due verticale e anche orizzontale.

87
00:06:20,190 --> 00:06:27,030
E poi faremo la stessa cosa con questo ultimo CD che sarebbe questo qui e se salviamo e

88
00:06:27,030 --> 00:06:31,840
aggiorniamo la pagina, ora abbiamo la nostra tavola completa per il tic tac.

89
00:06:31,950 --> 00:06:36,930
Quindi l'ultima cosa che voglio fare qui è semplicemente spostarla in modo che sia centrata

90
00:06:36,930 --> 00:06:38,800
e in realtà è davvero facile.

91
00:06:38,910 --> 00:06:42,460
È solo una linea di successo sul nostro tavolo.

92
00:06:42,720 --> 00:06:47,820
Daremo un margine d'ordine e ce ne andiamo.

93
00:06:47,850 --> 00:06:49,820
Questo margine viene calcolato automaticamente.

94
00:06:49,830 --> 00:06:51,270
Puoi vedere mentre scorro.

95
00:06:51,330 --> 00:06:57,140
quando ridimensiono la finestra che i margini aumentano e diminuiscono e quindi un'ultima

96
00:06:57,150 --> 00:07:04,440
cosa se volessimo aggiungere che ognuno nella parte superiore che dice semplicemente tic tac toe può farlo.

97
00:07:07,620 --> 00:07:08,520
Voglio dire

98
00:07:08,550 --> 00:07:12,690
Ma noterai che questo elemento è stato ispezionato da Phi.

99
00:07:13,200 --> 00:07:16,480
Beh, puoi vedere senza nemmeno ispezionarlo che è tutto finito sul lato.

100
00:07:16,650 --> 00:07:22,900
Quindi, se volevo andare nel mezzo, l'elemento in realtà occupa tutto lo schermo.

101
00:07:23,150 --> 00:07:24,620
Puoi vedere questo blu qui.

102
00:07:24,870 --> 00:07:31,710
Quindi posso semplicemente centrare il testo e questo ci darà l'effetto che l'H-1 è effettivamente nel mezzo.

103
00:07:31,980 --> 00:07:40,720
Quindi ho solo il centro di allineamento del testo H-1 e salvo.

104
00:07:41,130 --> 00:07:43,230
E qui andiamo, abbiamo un consiglio per i tic tac