devfzn/Oracle_One-Alura_Latam
devfzn/Oracle_One-Alura_Latam
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

HTML5 y CSS3 pt. 2: Posic. listas y navegación 04

Browse Source 
Uso del tag 'main'.
Creación de lista con productos: con titulos, imagenes y parrafos.
Uso de clases css y propiedad 'display' como 'inline-block'.
This commit is contained in:
devfzn 2023-04-11 01:12:32 -04:00
parent 21b068be85
commit e839b65bf8
Signed by: devfzn
GPG Key ID: E070ECF4A754FDB1
4 changed files with 130 additions and 1 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

76
004_primeras_paginas/README.md
View File

@ -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
<!DOCTYPE html>
<html>
<head>
<style>
span.a {
display: inline; /* the default for span */
width: 100px;
height: 100px;
padding: 5px;
border: 1px solid blue;
background-color: yellow;
}
span.b {
display: inline-block;
width: 100px;
height: 100px;
padding: 5px;
border: 1px solid blue;
background-color: yellow;
}
span.c {
display: block;
width: 100px;
height: 100px;
padding: 5px;
border: 1px solid blue;
background-color: yellow;
}
</style>
</head>
<body>
<h1>The display Property</h1>
<h2>display: inline</h2>
<div>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum
consequat scelerisque elit sit amet consequat. Aliquam erat volutpat.
<span class="a">Aliquam</span> <span class="a">venenatis</span> gravida
nisl sit amet facilisis. Nullam cursus fermentum velit sed laoreet.
</div>
<h2>display: inline-block</h2>
<div>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum
consequat scelerisque elit sit amet consequat. Aliquam erat volutpat.
<span class="b">Aliquam</span> <span class="b">venenatis</span>
gravida nisl sit amet facilisis. Nullam cursus fermentum velit sed laoreet.
</div>
<h2>display: block</h2>
<div>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum
consequat scelerisque elit sit amet consequat.Aliquam erat volutpat.
<span class="c">Aliquam</span> <span class="c">venenatis</span>
gravida nisl sit amet facilisis. Nullam cursus fermentum velit sed laoreet.
</div>
</body>
</html>
```
<p align="center">
<img style="align: center;" width="60%" src="./html_css_parte2/imagenes/css_display_property.png"/>
<br/><br/>
</p>
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).

BIN
004_primeras_paginas/html_css_parte2/imagenes/css_display_property.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 63 KiB

32
004_primeras_paginas/html_css_parte2/productos.css
View File

@ -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;
}

23
004_primeras_paginas/html_css_parte2/productos.html
View File

@ -20,6 +20,27 @@
</nav>
</div>
</header>
<main>
<ul class="productos">
<li>
<h2>Cabello</h2>
<img src="./imagenes/cabello.jpg"/>
<p class="prod_descripcion">Corte tijera y/o maquina, a elección del cliente</p>
<p class="prod_precio">$ 3.500.-</p>
</li>
<li>
<h2>Barba</h2>
<img src="./imagenes/barba.jpg"/>
<p class="prod_descripcion">Corte y diseño de barba</p>
<p class="prod_precio">$ 3.000.-</p>
</li>
<li>
<h2>Cabello + Barba</h2>
<img src="./imagenes/cabello+barba.jpg"/>
<p class="prod_descripcion">Pack full, cabello y barba</p>
<p class="prod_precio">6.000.-</p>
</li>
</ul>
</main>
</body>
</html>