marklogo/IFCD0210
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Dia 14

Browse Source
This commit is contained in:
Marklogo
2023-12-12 13:45:17 +01:00
parent 773da8d2dd
commit d4364785fc
9 changed files with 432 additions and 216 deletions
Download Patch File Download Diff File Expand all files Collapse all files

30
Practicas/Practicas CSS/Practica 14/Practica14.html Normal file
View File

@@ -0,0 +1,30 @@
<!doctype html>
<html>
<head>
<meta charset="utf-8"/>
<meta name="description" content="Web de recetas de cocina"/>
<meta name="keywords" content="palabra clave 1, palabra clave 2, palabra clave 3"/>
<meta name="author" content="Nombre del autor"/>
<meta name="copyright" content="Propietario del copyright"/>
<link href="css/estilo.css" rel="stylesheet">
<title>Práctica 14</title>
</head>
<body>
<header>
</header>
<nav>
</nav>
<section>
<div class="item" id="div1"><p>1 Div</p></div>
<div class="item" id="div2"><p>2 Div</p></div>
<div class="item" id="div3"><p>3 Div</p></div>
<div class="item" id="div4"><p>4 Div</p></div>
<div class="item" id="div5"><p>5 Div</p></div>
<div class="item" id="div6"><p>6 Div</p></div>
</section>
<article>
</article>
<footer>
</footer>
</body>
</html>

30
Practicas/Practicas CSS/Practica 14/Practica14b.html Normal file
View File

@@ -0,0 +1,30 @@
<!doctype html>
<html>
<head>
<meta charset="utf-8"/>
<meta name="description" content="Web de recetas de cocina"/>
<meta name="keywords" content="palabra clave 1, palabra clave 2, palabra clave 3"/>
<meta name="author" content="Nombre del autor"/>
<meta name="copyright" content="Propietario del copyright"/>
<link href="css/estilo14b.css" rel="stylesheet">
<title>Práctica 14</title>
</head>
<body>
<header>
</header>
<nav>
</nav>
<section>
<div class="item" id="div1"><p>Div 1 200X100</p></div>
<div class="item" id="div2"><p>Div 2 50X300</p></div>
<div class="item" id="div3"><p>Div 3 150X150</p></div>
<div class="item" id="div4"><p>Div 4 230X40 </p></div>
<div class="item" id="div5"><p>Div 5 110X140 </p></div>
<div class="item" id="div6"><p>Div 6 </p></div>
</section>
<article>
</article>
<footer>
</footer>
</body>
</html>

32
Practicas/Practicas CSS/Practica 14/css/estilo.css Normal file
View File

@@ -0,0 +1,32 @@
@charset "UTF-8";
* {
margin: 0;
padding: 0;
list-style: none;
text-decoration: none;
border: none;
outline: none;
}
.item {
width:100px;
height:100px;
background-color: orange;
color:white;
}
#div2{
position: relative;
top:40px;
left: 150px;
}
#div4{
position: fixed;
top: 20px;
right: 10px;
}
#div5{
position: sticky;
}

58
Practicas/Practicas CSS/Practica 14/css/estilo14b.css Normal file
View File

@@ -0,0 +1,58 @@
@charset "UTF-8";
* {
margin: 0;
padding: 0;
list-style: none;
text-decoration: none;
border: none;
outline: none;
}
.item {
position: absolute;
font-weight: bold;
color: white;
}
#div1 {
background-color: orange;
width: 200px;
height: 100px;
}
#div2 {
background-color: blue;
top: 50px;
left: 590px;
width: 50px;
height: 300px;
}
#div3 {
background-color: red;
top: 0px;
left: 300px;
width: 150px;
height: 150px;
}
#div4 {
background-color: black;
top: 0px;
left: 550px;
width: 230px;
height: 40px;
}
#div5 {
background-color: green;
top: 160px;
left: 300px;
width: 110px;
height: 140px;
}
#div6 {
display: none;
}

28
Practicas/Practicas CSS/Propiedad Posittion.txt Normal file
View File

@@ -0,0 +1,28 @@
Propiedad display
inline --Elemento en línea --El elemento se coloca a continuación del otro (en horizontal).
block --Elemento en bloque --El elemento se coloca encima de otro (en vertical).
flex --Utiliza el modelo de cajas flexibles de CSS.
none --Oculta el elemento visualmente
Propiedad visibility
visible --El elemento es visible. Valor por defecto.
hidden --El elemento no es visible pero sigue ocupando su espacio y posición.
Propiedad opacity
valores de 0 a 1
valores de 0% a 100%
*****Propiedad posittion *****
static Posicionamiento estático. Utiliza el orden natural de los elementos HTML.(Por defecto)
relative Posicionamiento relativo. Los elementos se mueven en base a su posición estática.
absolute Posicionamiento absoluto. Los elementos se colocan en base al contenedor padre.
Origen primer contenedor padre no static o body
fixed Posicionamiento fijo. Idem al absoluto, pero aunque hagamos scroll no se mueve.
sticky Posicionamiento «pegado». Similar al relativo y fixed.
top - botton - left - right
z-index posicionamiento en el eje de la pantalla (profundidad)
float para que los elementos floten a la izquierda (left) o a la derecha (right)
listas de menu(navegación)