Bienvenido de nuevo a esta lección, vamos a terminar el diseño de la página de la exposición de campamento al
final del último video.
Mencioné algunos de los cambios que tenemos que hacer.
Eso no se puede abordar con bootstrap puro.
Necesitamos agregar algunos estilos personalizados.
Así que tenemos que cambiar el ancho de esta imagen aquí para que ocupe el 100 por ciento de la miniatura.
Queríamos agregar algo de relleno aquí.
que debería ser cuando tenemos relleno y puede ver que la imagen ocupa todo el contenedor.
Esto es lo
Y para lograr eso, podríamos ir a lo que se muestra en cada Sí y agregar una etiqueta de estilo aquí.
Pero esa no es realmente una gran idea.
Entonces, en su lugar, vamos a agregar nuestra primera hoja de estilo personalizada y para hacer ese trabajo vamos a
hacer un directorio público como lo hicimos en una lección anterior.
Así que voy a hacer público el directorio y luego haré otro directorio dentro del público.
y presionaremos enter y luego vamos a hacer un único archivo dentro de las hojas de estilo public
sosh style las hojas se cortan y llamaremos a esto Dotsie SS malo Solo así.
Esta se llamará hojas de estilo para hojas de estilo de barra pública y tendremos otra más para nuestra parte frontal de Javascript
y Javascript
DE ACUERDO.
Ahora queremos abrir eso.
Así que abriremos ese archivo en las hojas de estilo principales y comenzaremos añadiendo algo realmente obvio
aquí como establecer el color de fondo para que el cuerpo sea violeta y guardar y luego tenemos que
seguir adelante y conectarlo.
Entonces en el caso de la aplicación tenemos que agregar una línea aquí donde hacemos un uso de la aplicación Express que es estático.
Y luego, lo que hicimos la última vez fue simplemente agregar en público, pero en realidad hay una
forma ligeramente mejor de hacerlo que no quería mostrar de inmediato.
Pero pretendo mostrarlo ahora todo lo que tenemos que hacer es agregar un guión bajo guión bajo Querido nombre del directorio
nombre más el nombre del directorio público de barra inclinada se refiere al directorio en el que se estaba ejecutando este guión.
Así que déjame mostrarte cómo se ve eso.
Si acabo de hacer una consola, pero con un guión bajo subrayar a su nombre y guardar
y reiniciar el servidor.
Fíjate lo que tengo aquí.
Este es el nombre del directorio, todo el espacio de trabajo de la ruta, exuberantemente de slash v 5.
Entonces, al agregar el nombre de directorio más el público de barra, estamos más seguros porque, si de alguna manera, potencialmente esto cambió,
el directorio actual se puso raro, sucedió algo que no esperábamos.
Lo cual afortunadamente nunca ocurre, pero si lo hiciera, su nombre siempre será el directorio en el que se encuentra
el script.
Así que solo estamos siendo más seguros y agregamos barras oblicuas y es la forma más convencional
de hacerlo.
No veremos la diferencia en absoluto.
Así que ahorraremos
Podemos deshacernos de esto y lo que hemos hecho se agrega en nuestra mente simple.
SS Pero aún no nos hemos vinculado.
Así que hemos servido el directorio público.
Ahora estamos sirviendo todo en ese directorio, que en realidad es solo una carpeta de hojas de estilo
y un solo archivo puede terminar en nosotros.
Pero ahora vamos a vincular a ese archivo y hagámoslo en el archivo de encabezado.
Así que voy a vistas de C9, recortaré la barra oblicua de Parshall y luego arriba en la cabeza después del arranque.
Voy a agregar otra etiqueta de enlace y esta será H ref igual a hojas de estilos de barra de
corte de C Ss principal y luego también agregaremos en fila aquí para ser una hoja de estilo.
DE ACUERDO.
Así que ahora hemos vinculado con esperanza nuestra hoja de estilo que ahora estamos sirviendo desde el directorio público.
Y probemos si funcionó.
Estará en cada página porque incluye todas las páginas que tienen el encabezado parcial.
Vamos a probar eso.
Estamos yendo a nuestra página de destino.
Aquí vamos.
Está todo morado y si vamos a ver nuestro campamento. También hay un fondo morado que depende totalmente de ti si
quieres mantenerlo como morado.
Voy a cambiarlo de nuevo.
Pero voy a agregar el estilo que ganamos y esos estilos van a afectar a las miniaturas.
Estas son las miniaturas y esta miniatura.
Vamos a hacer que la imagen ocupe el 100 por ciento del ancho, de modo que tanto en la página del programa como en la
página de índice queremos que eso suceda, de modo que podamos retroceder y cambiar y evaluar de manera más precisa.
Así que comenzaremos seleccionando todas las imágenes dentro de las miniaturas.
Necesitamos una miniatura porque es una clase de arranque.
Y luego la etiqueta de imagen con el espacio entre ellos, que son todas las etiquetas de imagen dentro de las miniaturas.
Y luego solo queremos establecer el ancho al 100 por ciento así como así.
Y si guardamos y actualizamos y vamos a una página de programa, puede ver que nuestra imagen ahora ocupa el 100 por
ciento de esta miniatura.
Entonces tenemos que resolver este problema de relleno que es realmente fácil de arreglar y donde queremos
deshacernos de ese espacio para hacer eso, tenemos que seleccionar la miniatura en sí.
La div miniatura y deshacerse del relleno y simplemente configurarlo es cero.
So Dot thumbnail padding 0.
Ahorremos
Mantenga su ojo en este relleno allí.
Ahora se ha ido.
Y si volvemos a nuestra página de índice, puede ver que ahora también están al ras.
No tenemos ningún relleno allí tampoco.
Personalmente lo prefiero sin el relleno aquí sin espacio intermedio.
Pero se trata de una cuestión de preferencia personal y si desea que vuelva ese espacio,
lo que puede hacer es no aplicar estos estilos de este estilo en particular a cada miniatura.
En su lugar, podría dar en nuestra página de espectáculos, podría darle a esta miniatura una ID o una clase
especial y luego solo aplicaría este paddings cero a esa clase o dos de esa ID.
Pero voy a hacerlo a todos ellos y luego el otro problema que tenemos que resolver es el relleno aquí.
Entonces, dentro de este título, si lo inspeccionamos, ese es el div que creamos, puede ver aquí, es un subtítulo
de clase div completo.
Queremos agregar algo de relleno allí y el número que decidimos en el último video fue de 9 píxeles.
Así que déjame cerrar la estafa. Vuelve aquí y voy a seleccionar en
lugar de todos los subtítulos de potro. Solo voy a seleccionar los pliegues de los subtítulos dentro de una miniatura.
Así que coloque el
subtítulo del espacio en miniatura lleno y le daremos un relleno de nueve píxeles al igual que este, guardemos la página.
Aquí vamos.
Obtenemos ese espacio que estamos buscando.
Todo bien.
Entonces eso es todo lo que quería hacer.
Recapitulemos rápidamente lo que hemos logrado.
Hicimos un nuevo archivo principal Nazi SS
y lo colocamos dentro del directorio público dentro de las hojas de estilo y, finalmente, tendrán más hojas de estilo, una
para la página de destino en particular, y también tendremos javascript que entrarán aquí también.
Y luego, para usar realmente
el directorio público, tenemos que interactuar Sí, decir expreso para que sirva al directorio público.
Y te mostré
que este guión bajo resalta tu nombre y lo último es que lo incluimos en el archivo de encabezado.
Está justo aquí y lo vinculamos con Slash stylesheets slash maned see SS