DE ACUERDO.
Entonces en este video vamos a recrear este ejercicio de tablero de tres en raya desde cero.
Así que vamos a comenzar desde el principio con un archivo vacío.
La placa de Coppermine que HVM puedo agregar en nuestra placa de la caldera.
Solo voy a llamarlo placa T T T y la forma en que esto funciona solo para refrescar tu memoria.
Es una mesa.
Todo esto es una mesa.
Tiene tres filas, una, dos y tres, y cada fila tiene tres Tweedy.
Así que terminamos con un tablero de tres por tres.
Y luego, lo que haremos es entrar y salir en estos tres televisores a los que vamos a girar a la izquierda y a la
derecha, y luego en estos tres vamos a girar el borde superior e inferior.
Entonces, debemos comenzar con nuestra mesa y luego con tres niveles.
Y de hecho voy a hacer tres tiaras y hacer las primeras D's.
Así que tenemos tres televisores y luego vamos
a duplicar eso una vez más.
Ahora tenemos nuestras tres filas con tres elementos, tres televisores en cada uno.
Así que guardaremos eso y si abrimos esto en el navegador, notará que no vemos nada.
Y eso es porque, aunque nuestra mesa está allí, antes que nada, no hay nada en nuestra mesa.
Y luego tampoco tenemos ningún estilo aplicado porque es posible tener una tabla vacía y aún ver cosas
que es realmente lo que está aquí.
No hay datos en estas tablas.
En este ejemplo, aquí solo hay una tabla y luego está diseñado.
Entonces, tiene un borde con un a.
Entonces tenemos que hacer eso.
Así que solo para demostrarles que está aquí, agreguemos un poco de estilo y esta vez lo voy a
hacer con una etiqueta de estilo que ya deben saber.
No es una gran idea a largo plazo, sino solo un video de solución solo por la facilidad de verlo aquí para que no
tengan que mirarme pasar de un archivo a otro y confundirse acerca de lo que va a hacer donde voy
a hacer en uno archivo aquí en la parte superior de la etiqueta de estilo.
Entonces, lo primero que voy a hacer es seleccionar las T y darles un ancho, y eso es porque en
este momento, si inspeccionáramos
los TT, veríamos que básicamente no están allí.
Son dos píxeles por dos píxeles.
Entonces, son realmente muy pequeños y eso es porque no hay nada allí y no
les hemos asignado una altura o altura.
Entonces, lo que quiero hacer es darles un ancho y vamos a comenzar con 100
píxeles y luego haremos lo mismo para la altura, guardaremos y actualizaremos y todavía no veremos nada.
Y nuevamente, eso se debe a que no les hemos dado nada para exhibir.
Pero si vamos a inspeccionar ahora, podemos ver que cada Tedy ahora tiene un cuadrado de 100 por 100 píxeles.
Así que vamos a darles un trasfondo para que puedan ver que están allí.
Diga backgrounders rosa guardar.
Y ahora podemos ver que tenemos los comienzos de nuestra junta.
Así que en realidad voy a deshacer ese color de fondo.
Solo quería mostrarte que las fichas están ahí.
Tenemos nuestros televisores.
Y ahora lo que tenemos que hacer es descubrir cómo activar selectivamente el borde.
Así que vamos a comenzar con estos tres elementos.
Queremos activar el borde izquierdo y derecho.
Entonces, si actualizo la página.
Pero empecemos por tomar este superior aquí y darle un cuarto izquierdo y otro derecho.
Así que me voy a ir y ese es el segundo TD en lugar del primer TR.
Voy a darle una clase y voy a llamar a esto una vertical y voy a hacer una
clase para estos tres llamados vertical donde simplemente obtenemos los bordes izquierdo y derecho.
Entonces la clase es igual a vertical.
Y luego, aquí vamos a seleccionar vertical y simplemente le daremos un borde a
la izquierda, hagamos un píxel negro por ahora y hagamos lo mismo para el borde.
Derecha.
Y si ahorramos y estamos frescos verás que tenemos el primer cuadrado completo.
Entonces ahora necesitamos agregar la t d que está debajo y la TV que está debajo de eso.
Y es por eso que hice una clase porque la vamos a usar más de una vez.
Entonces, en lugar de hacer de esto una identificación y luego hacer otra identificación para
este elemento y otra ID para esta que podría haber hecho, podría haber hecho algo como
ID middle y luego esta para ser id bottom o algo así.
Bueno, puedo tener un espacio allí pero algo así.
Eso no es una gran idea.
No queremos tener una identificación múltiple, así que voy a darle una clase y luego nuestra clase es vertical.
Así que voy a dárselo a este también.
Este es nuestro elemento intermedio justo debajo de él.
Y luego el otro que está debajo de eso.
Entonces esos tres ahora tienen clase vertical y pueden ver que obtenemos nuestras tres líneas verticales.
Entonces, ahora solo necesitamos repetir el mismo proceso en las líneas horizontales.
Y entonces queremos este elemento aquí.
Este aquí y este aquí tiene una parte superior de la frontera y un fondo de la frontera.
Así que esta vez voy a comenzar con la clase y obtenemos una copia horizontal y de subrayado, excepto cambiar
el borde dejado al borde superior e inferior del borde y luego todo lo que tenemos que hacer es firmar esta
clase horizontal con los elementos correctos.
Así que los que queremos que estén en este son aquí, así que esta será la primera T. T.
en el segundo TR.
Así que solo voy a seguir adelante y hacer eso.
La clase es igual o está en TL y copia eso.
Entonces lo queremos en este medio y verá que ya tenemos una clase vertical y no hemos visto
esto antes, donde tenemos más de una clase.
Es realmente fácil.
Todo lo que hacemos es agregar un espacio.
Entonces esta no es una clase llamada vertical horizontal.
Es dos verticales y también horizontales.
Y luego haremos lo mismo con este último CD, que sería aquí y si guardamos y
actualizamos la página, ahora tenemos nuestro tablero de tres en raya completo.
Así que lo último que quiero hacer aquí es mover esto para que esté centrado
y en realidad es realmente fácil.
Es solo una línea de éxito en nuestra mesa.
Vamos a darle un margen de orden y ahí vamos.
Ese margen se calcula automáticamente.
Puedes ver mientras me desplazo.
medida que cambio el tamaño de la ventana, los márgenes aumentan y disminuyen, y luego una última
cosa si queremos agregar que cada uno en la parte superior que simplemente dice tic tac toe puede hacer eso.
Quiero decir, a
Pero notarás que este elemento fue inspeccionado por Phi.
Bueno, puedes ver sin siquiera inspeccionar que todo está en el costado.
Entonces, si quería ir en el medio, el elemento realmente ocupa todo el camino a través de la pantalla.
Puedes ver este azul aquí.
Así que puedo simplemente centrar el texto y eso nos dará el efecto de que el H-1 está realmente en el medio.
Así que solo el texto H-1 alinea el centro y lo guardo.
Y ahí vamos, tenemos un tablero de tres en raya