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 05

Browse Source 
Bordes CSS: aplicación, tipos y redondeo.
This commit is contained in:
devfzn 2023-04-11 10:34:11 -04:00
parent e839b65bf8
commit 8cece2e6fa
Signed by: devfzn
GPG Key ID: E070ECF4A754FDB1
3 changed files with 48 additions and 40 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

81
004_primeras_paginas/README.md
View File

@ -1,4 +1,4 @@
# Formación programacion # Formación programación
## Primeros pasos ## Primeros pasos
@ -92,42 +92,44 @@ Página [productos](./html_css_parte2/productos.html) y
- 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) **CSS** - La propiedad [display](https://www.w3schools.com/css/css_inline-block.asp).
[`display`](https://www.w3schools.com/css/tryit.asp?filename=trycss_inline-block_span1).
<details><summary markdown="span">estilo</summary>
```css
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;
}
```
</details></br>
<details><summary markdown="span">html</summary>
```html ```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> <body>
<h1>The display Property</h1> <h1>The display Property</h1>
@ -155,15 +157,16 @@ Página [productos](./html_css_parte2/productos.html) y
gravida nisl sit amet facilisis. Nullam cursus fermentum velit sed laoreet. gravida nisl sit amet facilisis. Nullam cursus fermentum velit sed laoreet.
</div> </div>
</body> </body>
</html>
``` ```
</details></br>
<p align="center"> <p align="center">
<img style="align: center;" width="60%" src="./html_css_parte2/imagenes/css_display_property.png"/> <img style="align: center;" width="60%" src="./html_css_parte2/imagenes/css_display_property.png"/>
<br/><br/> <br/><br/>
</p> </p>
En la página [productos](./html_css_parte2/productos.html). Se utiliza la 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 propiedad `display` con el valor `inline-block` para poder ajustar su contenido
con [productos.css](./html_css_parte2/productos.css). en [productos.css](./html_css_parte2/productos.css).

5
004_primeras_paginas/html_css_parte2/productos.css
View File

@ -43,6 +43,11 @@ nav a{
margin: 0 1.5%; margin: 0 1.5%;
padding: 30px 20px; padding: 30px 20px;
box-sizing: border-box; box-sizing: border-box;
/*border-width: 2px;
border-style: solid;
border-color: #cd4f39;*/
border: 2px solid #cd4f39;
border-radius: 10px;
} }
.productos h2{ .productos h2{

2
004_primeras_paginas/html_css_parte2/productos.html
View File

@ -25,7 +25,7 @@
<li> <li>
<h2>Cabello</h2> <h2>Cabello</h2>
<img src="./imagenes/cabello.jpg"/> <img src="./imagenes/cabello.jpg"/>
<p class="prod_descripcion">Corte tijera y/o maquina, a elección del cliente</p> <p class="prod_descripcion">Corte tijera y/o maquina</p>
<p class="prod_precio">$ 3.500.-</p> <p class="prod_precio">$ 3.500.-</p>
</li> </li>
<li> <li>