En este video vamos a crear el sitio de la cartera de este fotógrafo desde cero.
Y, por lo general, le pediría que intentara hacer esto por su cuenta y luego le daría un video de solución
después de esto.
Sin embargo, esta vez es un código deliberado.
Así que me gustaría que intentes codificar y, si lo prefieres, puedes verlo una vez y luego codificarla
la próxima vez.
Pero el objetivo aquí es que lo hagamos juntos y hay otras dos cosas que queremos sacar
de esto.
El primero es que hay una nueva propiedad que voy a mostrar llamada float y la segunda es que solo quiero que tengas un poco
de experiencia en la construcción de algo de lo que puedas estar un poco orgulloso.
Eso se ve un poco mejor que algunas de las cosas simples que son colores brillantes realmente horribles
que hemos hecho hasta ahora.
Así que este es un blog de fotos realmente minimalista que vamos a hacer.
Entonces empecemos.
Abre sublime.
Tengo un único archivo llamado Photo grid that HMO.
Primero voy a mostrarte la imagen o con la que estamos trabajando.
Entonces estas son imágenes nueve imágenes tres imágenes cada una de tres fotógrafos diferentes que encontré
en Flickr.
Todas las fotos están autorizadas bajo Creative Commons.
Puedes la licencia aquí.
y voy a hacer una demostración rápida para que se 'tengo que codificar junto con esta parte cuando agrego
a los divs uno que dice hola y uno que dice adiós y voy a guardarlos y luego voy a agregar
mi hoja de estilos en la que estoy llamando fotos del SS y luego aquí voy a diseñar mis divs.
Entonces, antes de hacer algo con estas URL de imagen, en realidad me las voy a deshacer de ellas y voy a
agregar mi esqueleto envejecido ad-Din en el blog de fotos
Así que en realidad voy a darles un yo RE. solo llámalo uno.
Y de nuevo, esto es solo para demostrar algo y luego a un lado aquí voy a seleccionar uno y dos y todo lo que voy
a hacer es darles un color
de fondo diferente rojo y luego el color de fondo púrpura y entonces estoy va a darles a ambos todos los divs y un
ancho de 100 píxeles.
Entonces cuando hago esto, lo abro en el navegador.
Tenemos dos divs uno tras otro.
Recuerde que ellos si inspeccionamos.
Básicamente están configurados para que tomen su propia línea su elemento de nivel de bloque.
Entonces, si no quiero que suceda, que es lo que vamos a hacer para la cuadrícula de imágenes, queremos que
nuestras imágenes formen una cuadrícula o que varias estén en la misma línea.
Y si es así, si quiero hacer eso con divs, necesito usar una propiedad llamada float o esa es
una forma en que puedo lograrlo.
Así que aquí lo único que hago es flotar a la segura y lo que hará.
Eliminará los elementos de todos los divs del flujo normal del documento.
Entonces, actualmente hay montones en cada uno en líneas separadas.
Y lo que sucederá es que flotarán hacia la izquierda para pensar que la gravedad desaparecerá casi en
nuestro documento.
Y entonces este div va a flotar y empujar hacia la izquierda.
Contra esto.
Entonces, si estuviera fresco aquí, puede ver que ahora están en la misma línea.
imágenes para que podamos obtener imágenes que básicamente van una contra la otra y forman una cuadrícula.
Así que vamos a usar este principio cuando estamos usando
Así que me voy a deshacer de todo esto ahora y deshacerme del dispositivo que tenemos y voy a agregar en nuestra
imagen de esta manera.
Así que voy a hacer esta pantalla completa y simplemente pegaré en estos enlaces de imagen que están en ese
archivo incluido con este video.
Y en lugar de hacer nueve etiquetas de imagen como esta, hago una etiqueta de imagen y luego la copio y la
pego nueve veces, lo que debería ser muy lento.
de cada línea y luego voy a escribir fuente de imagen igual y luego moverme al final de la línea.
Voy a usar un poco de magia sublime aquí donde estoy usando el comando de clic para seleccionar el comienzo
Así que utilicé un comando de flecha derecha comando flecha izquierda lo lleva al comando de inicio
a la derecha hasta el final y luego voy a terminar con la cita y luego el corchete de cierre.
Así que esa era una forma muy fácil y rápida de incluir a todos aquellos que son Elfos como etiquetas de imagen.
Entonces, si guardo esto y van al navegador, verán cuándo actualizo.
Ahora tenemos nueve imágenes.
Por supuesto no están integrados.
Están ocupando mucho espacio.
Entonces, lo que vamos a hacer ahora es ir a nuestra hoja de estilos y seleccionar todas las imágenes.
Y lo primero que probablemente queremos hacer aquí es simplemente regalarlos.
Así que vamos a darles unos 100 píxeles para comenzar y esto será demasiado pequeño.
Pero quiero que veas lo que sucede y renueves y notarás que todas estas imágenes están alineadas
pero que hay un espacio entre ellas que no especificamos.
Nunca establecemos margen o relleno ni nada.
Entonces, lo que está sucediendo es que en realidad hay un espacio en blanco que se está agregando y es un poco
peculiar en un búho de vapor.
Pero cuando tenemos imágenes sin otra cosa, hay un espacio en blanco o solo un espacio que se
agrega entre estos.
Entonces, si queremos deshacernos de eso, podemos usar float y recordar que float eliminará las cosas
del flujo del documento.
Entonces, si actualizo Ahora, puedes ver que las imágenes se están uniendo entre sí y básicamente no
hay espacio entre ellas.
Y luego podemos regresar y agregar ese espacio en nosotros mismos.
Entonces, obviamente, no queremos que ocupen este pequeño espacio.
Queremos que pasen tres y queremos un margen entre ellos, pero queremos controlar eso.
Así que al cambiarlos nos deshacemos del espacio en blanco que el navegador agregó para nosotros, de modo que
ahora podemos entrar en nuestro propio espacio personalizado utilizando la propiedad de margen en lugar del espacio en blanco real.
Ahora vamos a cambiar el ancho y comencemos con el 30 por ciento.
Así que recuerda que el porcentaje de Israel es relativo a los elementos padres del cuerpo.
Entonces, cada uno ocupará el 30 por ciento del cuerpo.
Y la razón por la que estoy empezando con 30 es solo para asegurarme de que todos encajen en una línea o que tres encajen.
En mi mente, verás que atrapamos a tres de ellos sin espacio entre ellos.
Y luego tenemos nuestro 10 por ciento aquí porque esto es solo el 90 por ciento que estamos tomando.
Así que vamos a usar ese otro porcentaje para dividir realmente el margen y agregar un espacio entre
ellos.
Entonces ya tenemos una grilla de tres por tres.
Lo que queremos hacer ahora es hacer que se vea así.
O incluso tenemos un espacio entre ellos.
Entonces realmente tenemos que hacer un poco de matemática.
Entonces ya lo hice.
Pero básicamente, si calculamos esto, hay un margen aquí, aquí también hay un margen.
Hay un margen aquí tres.
Y luego en este para eso en este cinco.
Y en este o seis.
Entonces tenemos un 10 por ciento y tenemos que dividir eso por 6 y 10 dividido por seis es un punto seis seis.
Entonces, lo que vamos a hacer es decir margen un punto seis seis por ciento.
Entonces, si volvemos al navegador y miramos el resultado y la actualización, verá que
obtenemos tres imágenes espaciadas uniformemente con espacios entre ellas.
Entonces la matemática solo golpeó eso una vez más.
Cada uno de estos es 10 por ciento.
Entonces dan solo el 30 por ciento.
Y cada uno tiene un margen de 1. 6 por ciento en ambos lados.
Así que tomamos ambos lados de la izquierda y la derecha un punto seis veces dos más 30 por ciento y obtenemos treinta y
tres punto tres por ciento para cada uno de estos.
Así que ese es un tercio exactamente o casi exactamente que estamos redondeando, pero eso es lo mejor que podemos hacer aquí.
Así que treinta y tres punto tres por ciento.
Cada uno de estos podemos inspeccionar solo para verificar eso.
Aquí vamos.
Puedes ver que ocupa exactamente un tercio