diff --git a/004_primeras_paginas/README.md b/004_primeras_paginas/README.md index 555d4ed..c07f3e3 100644 --- a/004_primeras_paginas/README.md +++ b/004_primeras_paginas/README.md @@ -91,3 +91,79 @@ Página [productos](./html_css_parte2/productos.html) y - Lista html no ordenada. - Posicionamiento listas y 'menu' de navegación. - Posicionamiento encabezado de página. + +**CSS** - La [propiedad](https://www.w3schools.com/css/css_inline-block.asp) +[`display`](https://www.w3schools.com/css/tryit.asp?filename=trycss_inline-block_span1). + +```html + + + + + + +

The display Property

+ +

display: inline

+
+ Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum + consequat scelerisque elit sit amet consequat. Aliquam erat volutpat. + Aliquam venenatis gravida + nisl sit amet facilisis. Nullam cursus fermentum velit sed laoreet. +
+ +

display: inline-block

+
+ Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum + consequat scelerisque elit sit amet consequat. Aliquam erat volutpat. + Aliquam venenatis + gravida nisl sit amet facilisis. Nullam cursus fermentum velit sed laoreet. +
+ +

display: block

+
+ Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum + consequat scelerisque elit sit amet consequat.Aliquam erat volutpat. + Aliquam venenatis + gravida nisl sit amet facilisis. Nullam cursus fermentum velit sed laoreet. +
+ + +``` + +

+ +

+

+ +En la página [productos](./html_css_parte2/productos.html). Se utiliza la +propiedad`display` con el valor `inline-block` para pode ajustar su contenido +con [productos.css](./html_css_parte2/productos.css). + diff --git a/004_primeras_paginas/html_css_parte2/imagenes/css_display_property.png b/004_primeras_paginas/html_css_parte2/imagenes/css_display_property.png new file mode 100644 index 0000000..f88d8b8 Binary files /dev/null and b/004_primeras_paginas/html_css_parte2/imagenes/css_display_property.png differ diff --git a/004_primeras_paginas/html_css_parte2/productos.css b/004_primeras_paginas/html_css_parte2/productos.css index cb25257..6ca95dd 100644 --- a/004_primeras_paginas/html_css_parte2/productos.css +++ b/004_primeras_paginas/html_css_parte2/productos.css @@ -27,3 +27,35 @@ nav a{ font-size: 22px; text-decoration: none; } + +.productos{ + width: 80%; + margin: 0 auto; + padding: 30px; +} + +.productos li{ + display: inline-block; + text-align: center; + width: 30%; + vertical-align: top; + /*background: #cd4f39;*/ + margin: 0 1.5%; + padding: 30px 20px; + box-sizing: border-box; +} + +.productos h2{ + font-size: 26px; + font-weight: bold; +} + +.prod_descripcion { + font-size: 18px; +} + +.prod_precio { + font-size: 20px; + font-weight: bold; + margin-top: 10px; +} diff --git a/004_primeras_paginas/html_css_parte2/productos.html b/004_primeras_paginas/html_css_parte2/productos.html index 29b1f53..72c203e 100644 --- a/004_primeras_paginas/html_css_parte2/productos.html +++ b/004_primeras_paginas/html_css_parte2/productos.html @@ -20,6 +20,27 @@ - +
+ +