Repasemos una solución para este ejercicio.
Como siempre, puedes echar un vistazo al código de inmediato si quieres seguirnos.
Comience desde el principio conmigo.
Siéntete libre de hacerlo.
Así que lo primero que tenemos que hacer es crear un archivo nuevo. Lo llamaré Pokemon para que cada equipo cree
nuestro texto estándar y completemos el título para que coincida con el que debería ser.
Oh, vamos en la tabla.
Así que sabemos que va a tener un H-1 arriba y que cada uno es solo un hokum de primera generación en el gráfico.
Y sabemos que va a haber una mesa en esa mesa y tenemos una cabeza en T y un cuerpo en t que solo para refrescar la
memoria no afecta en nada la apariencia o el comportamiento de la mesa.
Se trata simplemente de hacer que nuestro marcado sea tan semántico como sea posible para que un motor de búsqueda
o un webcrawler sepa que este es el hatter correcto que aparece y este es el cuerpo.
Entonces solo una buena idea es práctica.
Así que, a continuación, vamos a agregar los cuatro encabezados más importantes, por lo que para los adolescentes tenemos el tipo de nombre de
imagen y evolucionamos a.
Así que sigamos y simplemente verifique cómo se ve bien.
Ahí está nuestra mesa hasta ahora.
Lo primero que probablemente querremos hacer es hacer que coincida con lo que teníamos. Le damos un borde.
Sin embargo, recuerde que no queremos hacer esto más adelante en la clase, así que una vez que
hablemos de C S, haremos todo el diseño a través de C S.
Esto es solo para hacer que las cosas sean visuales por el momento.
No es una mala idea saberlo, pero es una mejor idea realmente hacer esto profesionalmente.
OK, vamos a tomar algunos de estos datos.
comente todo y todo lo que va a hacer es crear mi primera fila, así que comenzaré con bulbasaur.
Cuando lo copie justo abajo,
Entonces en lugar del cuerpo necesario para su En lugar de ese TR Necesitamos 40.
El nombre va a corresponder a nuestro segundo Th.
Así que voy a ponerlo en el segundo lugar allí.
La imagen va primero.
Así que voy a copiar la imagen que tienes y luego voy a crear una etiqueta de imagen
y establecer la fuente igual a la que eres real dentro de esa ordenada si quieres, podrías espaciarla
un poco como esta .
Entonces, debes saber que esto no afecta nada, es solo estéticamente puro en
nuestro código, de modo que podemos ver las relaciones en las que está anidada esta imagen dentro del televisor. Si
tenemos el nombre siguiente, tenemos el tipo pasto y veneno.
Y finalmente tenemos otro más complejo en el que tenemos una etiqueta AI.
Recuerda que debe verse como esta, una etiqueta que dice Ivey's o así que e-tag copiemos
el enlace al que debe ir y luego copiemos el nombre para ese contenido y luego vamos a seguir adelante y deshacernos de
esto hasta deshacerse de los comentarios.
Bueno, deshazte de eso solo para que podamos limpiar esto un poco.
Vamos a actualizar y está nuestra primera entrada.
Verifica que funciona.
¿O puedo estar dolorido?
Estupendo.
DE ACUERDO.
Entonces, básicamente vamos a repetir exactamente el mismo proceso.
Y por el bien, voy a copiar esto.
tiene este bonito atajo donde puedes seleccionar y presionar comando cambiar el comando shifty dos veces si así lo deseas.
Así que toda esta fila y recuerda que puedes hacer Control-C y pegarlo con control V y comando C en el comando
que también suministramos
Y eso lo duplicará dos veces.
Así que ahora hemos duplicado eso automáticamente y solo tenemos que pasar y hacer algunos de los cambios.
Entonces, el primer nombre
es
Char Mandar, la imagen eres Owl y necesitamos Tamilian.
fuego y todos ustedes están aquí pegados.
Es un tipo de
Vamos a verificar eso.
Entonces deberíamos tener que abrir código fuente porque copiamos y pegamos en el enlace correcto.
Estupendo.
Ahora solo tenemos que terminar con
el agua
de imagen de Squirtle.
la bebida es agua.
Vayamos con usted o primero si el enlace cambió el nombre o la tortuga y
Toda la cantidad correcta de copiar y pegar allí.
Aquí vamos.
Asegúrate de que todo funcione bien.
OK, entonces eso es todo lo que tenemos que hacer para asegurarnos de que coincidan.
Se ve bien.
Estupendo.
Un pequeño cambio que podría hacer mientras estoy aquí.
Solo una buena lección sobre esto.
Agregaré un comentario aquí solo para aclararles, por lo que esta es la siguiente.
Esto es todo sobre el encanto de mandar.
Y, por último, esto es todo lo que corresponde a Squirtle.
Sin embargo, un cambio como mencioné es que estas imágenes son algo masivas.
Podríamos reducirlos hábilmente y eso reduciría el tamaño de una mesa.
Y esto es algo que harías con CSSA, es información de estilo.
Entonces lo ideal es que lo hagamos con s lejos de cada equipo.
Queremos mantenerlos separados.
Cada vez voy a estructurar el estilo de CSSA.
Pero para este ejercicio, lo que podemos hacer es agregar un atributo con una imagen, poner un número como 50 y
simplemente ver eso como una actualización.
Esto cambia a 50 píxeles mucho más pequeños en los que cambia a 500 y obtiene una imagen gigantesca.
Mantenerlo en 50.
Y otra razón por la que quiero mostrarte esto es en lugar de copiar y pegar esto
tres veces, lo que funciona bien.
Una mejor manera de hacerlo en sublime es crear realmente tres cursores, así que te mostraré lo que quiero decir.
Hacemos clic en el comando mantener presionado nuevamente el comando de extracción de la llave y hacemos clic nuevamente y luego podemos comenzar a escribir.
Y tengo tres cursores a la vez con igual a 50.
Entonces esto es genial.
Es muy útil si necesita cambiar varias cosas a la vez de la misma manera
que simplemente ordena hacer clic por todas partes y genera un montón de maldiciones.
Y como pueden ver, tenemos una mesa agradable y legible.
Todo bien