logo 3con14 css cod css
  • CSS
  • Conceptos
  • Selectores
  • Unidades, Color
  • Modelo de cajas
  • Posicionamiento
  • Textos, Enlaces
  • Listas, Menús
  • Tablas, Columnas
  • Diseño (Layout)
    • Grid Layout
    • Flex Box
    • Media queries
  • Imagen, Filtros, ...
  • Movimientos
    • Transformaciones
    • Transiciones
    • Animaciones
  • Formularios
  • 🔴 TAREAS
 
 
icon html5
icon css3
mlogo 3con14 css cod

  • Inicio
  • Diseño (Layout)
  • Media queries
  • Ejemplos responsive

Ejemplos responsive

Ejemplo utilizando GRID-Layout, con dos puntos de ruptura:

Ejemplo utilizando GRID-Layout, con dos puntos de ruptura:

(pulsa sobre la pestaña CSS para ver como cambia el diseño)

See the Pen GRID Layout responsive by Jesús Plaza M. (@3con14) on CodePen.

Ejemplo utilizando FLEXBOX-Layout, con dos puntos de ruptura:

Ejemplo utilizando FLEXBOX-Layout, con dos puntos de ruptura:

(pulsa sobre la pestaña CSS para ver como cambia el diseño)

See the Pen HTML5 báscio con Flexbox by Jesús Plaza M. (@3con14) on CodePen.

  • Anterior

Layout

  • Qué es el Layout
  • -- Qué es Grid Layout
  • Propiedades: Grid container
  • Propiedades: Grid Items
  • -- Qué es CSS FlexBox
  • Propiedades: Flex container
  • Propiedades: Flex Items
  • -- Qué es Media querie
  • Ejemplos responsive

Media queries

  • -- Qué es Media querie
  • Ejemplos responsive

Recursos ...

  • Visual Studio code
  • Sublime Text
  • CSS LINT
  • Normalize

codepen

uniwebsidad

overapi

can i use

w3schools

mdn

Licencias ...

3con14─LAB 1998 - 2021
www.3con14.biz
(cc) Jesús Plaza M.
─ Otros Reconocimientos ─

Visitas ...

Hoy ... 21

Ayer ... 31

Week 201

Mes ... 95

TOTAL ... 46318

  • CSS
  • Conceptos
  • Selectores
  • Unidades, Color
  • Modelo de cajas
  • Posicionamiento
  • Textos, Enlaces
  • Listas, Menús
  • Tablas, Columnas
  • Diseño (Layout)
    • Grid Layout
    • Flex Box
    • Media queries
  • Imagen, Filtros, ...
  • Movimientos
    • Transformaciones
    • Transiciones
    • Animaciones
  • Formularios
  • 🔴 TAREAS