OK.
Quindi in questo video ricreeremo da zero questo esercizio di tris.
Quindi inizieremo dall'inizio con un file vuoto.
I Coppermine board che HVM può aggiungere nel nostro piatto caldaia.
Lo chiamerò T T T board e il modo in cui funziona solo per farti perdere la memoria.
È un tavolo.
Tutta questa cosa è un tavolo.
Ha tre file uno due e tre e ogni fila ha tre Tweedy.
Quindi finiamo con una tavola tre a tre.
E poi quello che faremo è entrare e su questi tre televisori gireremo il bordo sinistro e destro e
poi su questi tre gireremo il bordo superiore e quello inferiore.
Quindi dobbiamo iniziare con il nostro tavolo e poi tre livelli.
E in effetti sto per andare a fare tre diademi e fare i t D's prima.
Quindi otteniamo tre televisori e quindi
duplicheremo ancora una volta.
Ora abbiamo le nostre tre file con tre elementi in tre televisori ciascuno.
Quindi lo salveremo e se lo apriamo nel browser noterai che non vediamo nulla.
E questo perché anche se il nostro tavolo è lì, prima di tutto non c'è niente nel nostro tavolo.
E poi anche non abbiamo applicato alcuno stile perché è possibile avere una tabella vuota e vedere ancora cose
che sono effettivamente ciò che è qui.
Non ci sono dati in queste tabelle.
In questo esempio qui è solo un tavolo e poi è in stile.
Quindi quello ha un con esso ha un confine.
Quindi dobbiamo farlo.
Quindi, solo per dimostrarti che è qui aggiungiamo un po 'di stile e stavolta lo farò in un
tag di stile questa volta che dovresti sapere ormai.
Non è una grande idea a lungo termine, ma solo per un video di soluzione solo per la facilità di guardare qui
in modo che non debbano guardarmi girare tra i file e confondermi su quello che succede dove andrò
a fare in uno file qui in alto nel tag dello stile.
Quindi la prima cosa che farò è selezionare le T e dare loro una larghezza e questo perché proprio ora,
se ispezioniamo i TT,
vedresti che in pratica non sono affatto lì.
Sono due pixel per due pixel.
Quindi sono davvero molto piccoli e questo perché non c'è niente lì e non
li abbiamo assegnati a con o un'altezza.
Quindi quello che voglio fare è dargli una larghezza e inizieremo con 100 pixel e
poi faremo la stessa cosa per l'altezza e salveremo e aggiorneremo e non vediamo ancora nulla.
E ancora perché non abbiamo dato loro nulla da mostrare.
Ma se andiamo a ispezionare ora possiamo vedere che ogni Tedy è ora un quadrato di 100 per 100 pixel.
Quindi andiamo a dare loro uno sfondo solo così puoi vedere che sono lì.
Supponiamo che gli sfondi siano rosa.
E ora possiamo vedere che abbiamo l'inizio della nostra tavola.
Quindi annullerò il colore di sfondo.
Volevo solo mostrarti che le tessere ci sono.
Abbiamo i nostri televisori.
E ora quello che dobbiamo fare è capire come attivare selettivamente il confine.
Quindi inizieremo con questi tre elementi.
Vogliamo girare a sinistra e a destra.
Quindi, se aggiorno la pagina.
Ma iniziamo prendendo quello superiore proprio qui e dandogli un angolo sinistro e uno destro.
Quindi ho intenzione di andare e questo è il secondo TD al posto del primo TR.
Sto solo andando a dargli un corso e lo chiamerò solo verticale e farò una classe
per questi tre chiamati verticale dove otteniamo solo i bordi sinistro e destro.
Quindi la classe è uguale a verticale.
E poi qui selezioneremo la verticale e gli daremo solo un bordo sinistro
e facciamo un pixel nero per ora e facciamo la stessa cosa per il bordo.
Destra.
E se salviamo e siamo freschi vedremo che abbiamo il primo quadrato completato.
Quindi ora abbiamo bisogno di aggiungere il t d che è sotto di esso e il televisore che è al di sotto di quello.
Ed è per questo che ho fatto un corso perché lo useremo più di una volta.
Quindi, piuttosto che rendere questo un ID e poi fare un altro ID per questo
elemento e un altro ID per questo che avrei potuto fare, avrei potuto fare qualcosa come
ID middle e poi questo sarà id middle bottom o qualcosa del genere.
Beh, posso avere uno spazio lì, ma qualcosa del genere.
Questa non è una buona idea.
Non vogliamo avere più ID quindi Im solo intenzione di dargli una classe e quindi la nostra classe è verticale.
Quindi vado a darlo anche a questo.
Questo è il nostro elemento centrale che è proprio sotto di esso.
E poi l'altro che è sotto quello.
Quindi quei tre ora hanno la verticale in classe e puoi vedere che otteniamo le nostre tre linee verticali.
Quindi ora abbiamo solo bisogno di ripetere lo stesso processo sulle linee orizzontali.
E quindi vogliamo questo elemento qui.
Questo qui e questo qui per avere un bordo superiore e un bordo inferiore.
Quindi questa volta inizierò con la classe e otterremo una copia orizzontale e sottostringa di una copia, tranne il
bordo di sinistra a bordo superiore e bordo inferiore e quindi tutto ciò che dobbiamo fare è firmare questa classe
orizzontale con gli elementi corretti.
Quindi quelli che vogliamo che siano su questo sono proprio qui, quindi questo sarà il primo T. T.
nel secondo TR.
Quindi ho intenzione di andare avanti e farlo.
La classe è uguale o è su TL e copia quella.
Poi lo vogliamo in questo mezzo qui e vedrai che abbiamo già una classe verticale e in realtà non l'abbiamo
mai vista prima dove abbiamo più di una classe.
È davvero facile
Tutto ciò che facciamo è aggiungere uno spazio.
Quindi questa non è una classe chiamata verticale orizzontale.
È due verticale e anche orizzontale.
E poi faremo la stessa cosa con questo ultimo CD che sarebbe questo qui e se salviamo e
aggiorniamo la pagina, ora abbiamo la nostra tavola completa per il tic tac.
Quindi l'ultima cosa che voglio fare qui è semplicemente spostarla in modo che sia centrata
e in realtà è davvero facile.
È solo una linea di successo sul nostro tavolo.
Daremo un margine d'ordine e ce ne andiamo.
Questo margine viene calcolato automaticamente.
Puoi vedere mentre scorro.
quando ridimensiono la finestra che i margini aumentano e diminuiscono e quindi un'ultima
cosa se volessimo aggiungere che ognuno nella parte superiore che dice semplicemente tic tac toe può farlo.
Voglio dire
Ma noterai che questo elemento è stato ispezionato da Phi.
Beh, puoi vedere senza nemmeno ispezionarlo che è tutto finito sul lato.
Quindi, se volevo andare nel mezzo, l'elemento in realtà occupa tutto lo schermo.
Puoi vedere questo blu qui.
Quindi posso semplicemente centrare il testo e questo ci darà l'effetto che l'H-1 è effettivamente nel mezzo.
Quindi ho solo il centro di allineamento del testo H-1 e salvo.
E qui andiamo, abbiamo un consiglio per i tic tac