1 00:00:00,420 --> 00:00:05,520 Bienvenido de nuevo a esta lección, vamos a terminar el diseño de la página de la exposición de campamento al 2 00:00:05,520 --> 00:00:06,550 final del último video. 3 00:00:06,630 --> 00:00:08,540 Mencioné algunos de los cambios que tenemos que hacer. 4 00:00:08,640 --> 00:00:10,970 Eso no se puede abordar con bootstrap puro. 5 00:00:10,980 --> 00:00:13,050 Necesitamos agregar algunos estilos personalizados. 6 00:00:13,050 --> 00:00:18,570 Así que tenemos que cambiar el ancho de esta imagen aquí para que ocupe el 100 por ciento de la miniatura. 7 00:00:18,750 --> 00:00:21,050 Queríamos agregar algo de relleno aquí. 8 00:00:21,120 --> 00:00:25,050 que debería ser cuando tenemos relleno y puede ver que la imagen ocupa todo el contenedor. 9 00:00:25,050 --> 00:00:25,880 Esto es lo 10 00:00:26,280 --> 00:00:31,810 Y para lograr eso, podríamos ir a lo que se muestra en cada Sí y agregar una etiqueta de estilo aquí. 11 00:00:32,280 --> 00:00:34,050 Pero esa no es realmente una gran idea. 12 00:00:34,050 --> 00:00:39,840 Entonces, en su lugar, vamos a agregar nuestra primera hoja de estilo personalizada y para hacer ese trabajo vamos a 13 00:00:39,840 --> 00:00:42,960 hacer un directorio público como lo hicimos en una lección anterior. 14 00:00:43,110 --> 00:00:48,790 Así que voy a hacer público el directorio y luego haré otro directorio dentro del público. 15 00:00:48,870 --> 00:00:55,350 y presionaremos enter y luego vamos a hacer un único archivo dentro de las hojas de estilo public 16 00:00:55,350 --> 00:01:00,810 sosh style las hojas se cortan y llamaremos a esto Dotsie SS malo Solo así. 17 00:01:00,810 --> 00:01:09,210 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 18 00:01:09,210 --> 00:01:10,000 y Javascript 19 00:01:10,470 --> 00:01:11,260 DE ACUERDO. 20 00:01:11,520 --> 00:01:13,040 Ahora queremos abrir eso. 21 00:01:13,380 --> 00:01:19,830 Así que abriremos ese archivo en las hojas de estilo principales y comenzaremos añadiendo algo realmente obvio 22 00:01:19,830 --> 00:01:26,790 aquí como establecer el color de fondo para que el cuerpo sea violeta y guardar y luego tenemos que 23 00:01:26,790 --> 00:01:28,140 seguir adelante y conectarlo. 24 00:01:28,140 --> 00:01:36,790 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. 25 00:01:37,380 --> 00:01:41,790 Y luego, lo que hicimos la última vez fue simplemente agregar en público, pero en realidad hay una 26 00:01:41,790 --> 00:01:44,380 forma ligeramente mejor de hacerlo que no quería mostrar de inmediato. 27 00:01:44,400 --> 00:01:50,370 Pero pretendo mostrarlo ahora todo lo que tenemos que hacer es agregar un guión bajo guión bajo Querido nombre del directorio 28 00:01:50,880 --> 00:01:57,050 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. 29 00:01:57,180 --> 00:01:58,630 Así que déjame mostrarte cómo se ve eso. 30 00:01:58,800 --> 00:02:07,920 Si acabo de hacer una consola, pero con un guión bajo subrayar a su nombre y guardar 31 00:02:07,920 --> 00:02:10,190 y reiniciar el servidor. 32 00:02:12,000 --> 00:02:13,440 Fíjate lo que tengo aquí. 33 00:02:13,530 --> 00:02:19,560 Este es el nombre del directorio, todo el espacio de trabajo de la ruta, exuberantemente de slash v 5. 34 00:02:19,710 --> 00:02:26,940 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ó, 35 00:02:26,940 --> 00:02:30,390 el directorio actual se puso raro, sucedió algo que no esperábamos. 36 00:02:30,450 --> 00:02:36,210 Lo cual afortunadamente nunca ocurre, pero si lo hiciera, su nombre siempre será el directorio en el que se encuentra 37 00:02:36,210 --> 00:02:36,650 el script. 38 00:02:36,900 --> 00:02:41,240 Así que solo estamos siendo más seguros y agregamos barras oblicuas y es la forma más convencional 39 00:02:41,250 --> 00:02:41,860 de hacerlo. 40 00:02:42,060 --> 00:02:43,820 No veremos la diferencia en absoluto. 41 00:02:43,860 --> 00:02:44,920 Así que ahorraremos 42 00:02:44,930 --> 00:02:50,140 Podemos deshacernos de esto y lo que hemos hecho se agrega en nuestra mente simple. 43 00:02:50,190 --> 00:02:52,390 SS Pero aún no nos hemos vinculado. 44 00:02:52,530 --> 00:02:54,500 Así que hemos servido el directorio público. 45 00:02:54,600 --> 00:02:59,460 Ahora estamos sirviendo todo en ese directorio, que en realidad es solo una carpeta de hojas de estilo 46 00:02:59,460 --> 00:03:01,540 y un solo archivo puede terminar en nosotros. 47 00:03:01,620 --> 00:03:05,510 Pero ahora vamos a vincular a ese archivo y hagámoslo en el archivo de encabezado. 48 00:03:05,580 --> 00:03:14,920 Así que voy a vistas de C9, recortaré la barra oblicua de Parshall y luego arriba en la cabeza después del arranque. 49 00:03:14,980 --> 00:03:22,200 Voy a agregar otra etiqueta de enlace y esta será H ref igual a hojas de estilos de barra de 50 00:03:24,660 --> 00:03:31,330 corte de C Ss principal y luego también agregaremos en fila aquí para ser una hoja de estilo. 51 00:03:31,950 --> 00:03:32,500 DE ACUERDO. 52 00:03:32,850 --> 00:03:38,340 Así que ahora hemos vinculado con esperanza nuestra hoja de estilo que ahora estamos sirviendo desde el directorio público. 53 00:03:38,340 --> 00:03:40,680 Y probemos si funcionó. 54 00:03:40,740 --> 00:03:45,350 Estará en cada página porque incluye todas las páginas que tienen el encabezado parcial. 55 00:03:45,630 --> 00:03:46,380 Vamos a probar eso. 56 00:03:46,380 --> 00:03:48,450 Estamos yendo a nuestra página de destino. 57 00:03:48,450 --> 00:03:48,980 Aquí vamos. 58 00:03:48,990 --> 00:03:55,230 Está todo morado y si vamos a ver nuestro campamento. También hay un fondo morado que depende totalmente de ti si 59 00:03:55,230 --> 00:03:56,510 quieres mantenerlo como morado. 60 00:03:56,610 --> 00:03:57,620 Voy a cambiarlo de nuevo. 61 00:03:57,750 --> 00:04:03,210 Pero voy a agregar el estilo que ganamos y esos estilos van a afectar a las miniaturas. 62 00:04:03,210 --> 00:04:07,050 Estas son las miniaturas y esta miniatura. 63 00:04:07,080 --> 00:04:13,170 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 64 00:04:13,170 --> 00:04:18,000 página de índice queremos que eso suceda, de modo que podamos retroceder y cambiar y evaluar de manera más precisa. 65 00:04:18,180 --> 00:04:21,750 Así que comenzaremos seleccionando todas las imágenes dentro de las miniaturas. 66 00:04:21,900 --> 00:04:25,300 Necesitamos una miniatura porque es una clase de arranque. 67 00:04:25,550 --> 00:04:31,290 Y luego la etiqueta de imagen con el espacio entre ellos, que son todas las etiquetas de imagen dentro de las miniaturas. 68 00:04:31,290 --> 00:04:36,180 Y luego solo queremos establecer el ancho al 100 por ciento así como así. 69 00:04:36,300 --> 00:04:42,420 Y si guardamos y actualizamos y vamos a una página de programa, puede ver que nuestra imagen ahora ocupa el 100 por 70 00:04:42,420 --> 00:04:43,510 ciento de esta miniatura. 71 00:04:43,860 --> 00:04:48,210 Entonces tenemos que resolver este problema de relleno que es realmente fácil de arreglar y donde queremos 72 00:04:48,210 --> 00:04:51,820 deshacernos de ese espacio para hacer eso, tenemos que seleccionar la miniatura en sí. 73 00:04:51,870 --> 00:04:56,350 La div miniatura y deshacerse del relleno y simplemente configurarlo es cero. 74 00:04:56,490 --> 00:05:01,580 So Dot thumbnail padding 0. 75 00:05:01,890 --> 00:05:02,930 Ahorremos 76 00:05:03,120 --> 00:05:05,260 Mantenga su ojo en este relleno allí. 77 00:05:05,280 --> 00:05:06,130 Ahora se ha ido. 78 00:05:06,510 --> 00:05:11,230 Y si volvemos a nuestra página de índice, puede ver que ahora también están al ras. 79 00:05:11,280 --> 00:05:12,980 No tenemos ningún relleno allí tampoco. 80 00:05:13,320 --> 00:05:17,100 Personalmente lo prefiero sin el relleno aquí sin espacio intermedio. 81 00:05:17,250 --> 00:05:22,290 Pero se trata de una cuestión de preferencia personal y si desea que vuelva ese espacio, 82 00:05:22,320 --> 00:05:27,910 lo que puede hacer es no aplicar estos estilos de este estilo en particular a cada miniatura. 83 00:05:27,990 --> 00:05:34,290 En su lugar, podría dar en nuestra página de espectáculos, podría darle a esta miniatura una ID o una clase 84 00:05:34,290 --> 00:05:39,280 especial y luego solo aplicaría este paddings cero a esa clase o dos de esa ID. 85 00:05:39,480 --> 00:05:44,970 Pero voy a hacerlo a todos ellos y luego el otro problema que tenemos que resolver es el relleno aquí. 86 00:05:45,780 --> 00:05:53,970 Entonces, dentro de este título, si lo inspeccionamos, ese es el div que creamos, puede ver aquí, es un subtítulo 87 00:05:53,970 --> 00:05:55,560 de clase div completo. 88 00:05:55,770 --> 00:06:00,870 Queremos agregar algo de relleno allí y el número que decidimos en el último video fue de 9 píxeles. 89 00:06:00,930 --> 00:06:02,830 Así que déjame cerrar la estafa. Vuelve aquí y voy a seleccionar en 90 00:06:03,030 --> 00:06:08,850 lugar de todos los subtítulos de potro. Solo voy a seleccionar los pliegues de los subtítulos dentro de una miniatura. 91 00:06:08,850 --> 00:06:11,100 Así que coloque el 92 00:06:11,220 --> 00:06:21,690 subtítulo del espacio en miniatura lleno y le daremos un relleno de nueve píxeles al igual que este, guardemos la página. 93 00:06:21,690 --> 00:06:23,130 Aquí vamos. 94 00:06:23,130 --> 00:06:23,750 Obtenemos ese espacio que estamos buscando. 95 00:06:23,760 --> 00:06:26,130 Todo bien. 96 00:06:26,130 --> 00:06:26,390 Entonces eso es todo lo que quería hacer. 97 00:06:26,400 --> 00:06:27,610 Recapitulemos rápidamente lo que hemos logrado. 98 00:06:27,780 --> 00:06:29,910 Hicimos un nuevo archivo principal Nazi SS 99 00:06:29,910 --> 00:06:36,470 y lo colocamos dentro del directorio público dentro de las hojas de estilo y, finalmente, tendrán más hojas de estilo, una 100 00:06:36,840 --> 00:06:41,490 para la página de destino en particular, y también tendremos javascript que entrarán aquí también. 101 00:06:41,490 --> 00:06:43,560 Y luego, para usar realmente 102 00:06:43,680 --> 00:06:49,740 el directorio público, tenemos que interactuar Sí, decir expreso para que sirva al directorio público. 103 00:06:49,740 --> 00:06:50,410 Y te mostré 104 00:06:50,520 --> 00:06:55,230 que este guión bajo resalta tu nombre y lo último es que lo incluimos en el archivo de encabezado. 105 00:06:55,230 --> 00:06:56,660 Está justo aquí y lo vinculamos con Slash stylesheets slash maned see SS 106 00:06:56,680 --> 00:07:01,300