HTML5 y CSS3 pt. 2: Posic. listas y navegación 04
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:
parent
21b068be85
commit
e839b65bf8
GPG Key ID:
E070ECF4A754FDB1
@ -91,3 +91,79 @@ Página [productos](./html_css_parte2/productos.html) y
|
|||||||
- Lista html no ordenada.
|
- Lista html no ordenada.
|
||||||
- Posicionamiento listas y 'menu' de navegación.
|
- Posicionamiento listas y 'menu' de navegación.
|
||||||
- Posicionamiento encabezado de página.
|
- 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).
|
||||||
|
|
||||||
|
|||||||
Binary file not shown.
|
After Width: | Height: | Size: 63 KiB |
@ -27,3 +27,35 @@ nav a{
|
|||||||
font-size: 22px;
|
font-size: 22px;
|
||||||
text-decoration: none;
|
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;
|
||||||
|
}
|
||||||
|
|||||||
@ -20,6 +20,27 @@
|
|||||||
</nav>
|
</nav>
|
||||||
</div>
|
</div>
|
||||||
</header>
|
</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>
|
</body>
|
||||||
</html>
|
</html>
|
||||||
|
|||||||
Loading…
Reference in New Issue
Block a user