Muestra las diferencias entre dos versiones de la página.
Ambos lados, revisión anterior Revisión previa Próxima revisión | Revisión previa Próxima revisión Ambos lados, revisión siguiente | ||
clase:daw:diw:1eval:tema02 [2022/10/10 11:45] admin [Ejercicios] |
clase:daw:diw:1eval:tema02 [2023/09/14 22:29] admin [Arquitectura CSS] |
||
---|---|---|---|
Línea 190: | Línea 190: | ||
Como arquitectura CSS vamos a seguir durante todo el curso una llamada [[http:// | Como arquitectura CSS vamos a seguir durante todo el curso una llamada [[http:// | ||
+ | |||
+ | |||
+ | {{: | ||
+ | [[https:// | ||
Línea 350: | Línea 354: | ||
* g--margin-4 | * g--margin-4 | ||
* g--margin-bottom-6 | * g--margin-bottom-6 | ||
+ | |||
+ | {{: | ||
+ | |||
---- | ---- | ||
Línea 501: | Línea 508: | ||
* Botón '' | * Botón '' | ||
- | ==== Ejercicio 6 ==== | + | ==== Ejercicio 6.A ==== |
Crea las clases CSS necesarias para crear el componente " | Crea las clases CSS necesarias para crear el componente " | ||
Lo puedes ver en [[https:// | Lo puedes ver en [[https:// | ||
+ | |||
+ | ==== Ejercicio 6.B ==== | ||
+ | Añade al ejercicio anterior los modificadores necesarios para que el panel pueda ser de " | ||
+ | |||
+ | Y crea un panel normal y otro de peligro | ||
Línea 643: | Línea 655: | ||
+ | ==== Ejercicio 8 ==== | ||
+ | Crear un map con los tamaños de padding | ||
+ | $padding-values { | ||
+ | " | ||
+ | " | ||
+ | " | ||
+ | ...... | ||
+ | } | ||
+ | | ||
+ | Pero usando los valores del array de paddings del tema 1. | ||
+ | Crea los siguientes globales | ||
+ | g--padding-0 | ||
+ | g--padding-1 | ||
+ | .... | ||
+ | g--padding-left-0 | ||
+ | g--padding-left-1 | ||
+ | .... | ||
+ | g--padding-right-0 | ||
+ | g--padding-right-1 | ||
+ | .... | ||
+ | g--padding-top-0 | ||
+ | g--padding-top-1 | ||
+ | .... | ||
+ | g--padding-bottom-0 | ||
+ | g--padding-bottom-1 | ||
+ | .... | ||
+ | g--padding-vertical-0 | ||
+ | g--padding-vertical-1 | ||
+ | .... | ||
+ | g--padding-horizontal-0 | ||
+ | g--padding-horizontal-1 | ||
+ | .... | ||
- | ==== Ejercicio 8 ==== | + | ==== Ejercicio |
+ | Repite el ejercicio anterior pero ahora con | ||
+ | * la propiedad '' | ||
+ | * La propiedad '' | ||
+ | |||
+ | ==== Ejercicio 10 ==== | ||
+ | Repite el ejercicio anterior pero ahora con los colores del tema 1. | ||
+ | |||
+ | Para ello deberás crear un map dentro de un map: | ||
+ | |||
+ | <sxh base> | ||
+ | $colores: | ||
+ | " | ||
+ | " | ||
+ | " | ||
+ | ) | ||
+ | </ | ||
+ | |||
+ | Las propiedades CSS serán: | ||
+ | * '' | ||
+ | * '' | ||
+ | |||
+ | |||
+ | Y al crear los globales tendrán la siguiente forma | ||
+ | |||
+ | * '' | ||
+ | * '' | ||
+ | * etc. | ||
+ | |||
+ | |||
+ | |||
+ | ==== Ejercicio 11 ==== | ||
Mira la página de [[https:// | Mira la página de [[https:// | ||
* Los componentes, | * Los componentes, | ||
Línea 658: | Línea 733: | ||
Este ejercicio es como hacer el análisis de la página desde el punto de vista de BEM | Este ejercicio es como hacer el análisis de la página desde el punto de vista de BEM | ||
- | ==== Ejercicio | + | ==== Ejercicio |
Crea una página web que tenga lo siguiente: | Crea una página web que tenga lo siguiente: | ||