diff --git a/Practicas/Practicas CSS/Practica 14/Practica14.html b/Practicas/Practicas CSS/Practica 14/Practica14.html new file mode 100644 index 0000000..a9aac3d --- /dev/null +++ b/Practicas/Practicas CSS/Practica 14/Practica14.html @@ -0,0 +1,30 @@ + + + + + + + + + + Práctica 14 + + +
+
+ +
+

1 Div

+

2 Div

+

3 Div

+

4 Div

+

5 Div

+

6 Div

+
+
+
+ + + \ No newline at end of file diff --git a/Practicas/Practicas CSS/Practica 14/Practica14b.html b/Practicas/Practicas CSS/Practica 14/Practica14b.html new file mode 100644 index 0000000..0a16942 --- /dev/null +++ b/Practicas/Practicas CSS/Practica 14/Practica14b.html @@ -0,0 +1,30 @@ + + + + + + + + + + Práctica 14 + + +
+
+ +
+

Div 1 200X100

+

Div 2 50X300

+

Div 3 150X150

+

Div 4 230X40

+

Div 5 110X140

+

Div 6

+
+
+
+ + + \ No newline at end of file diff --git a/Practicas/Practicas CSS/Practica 14/css/estilo.css b/Practicas/Practicas CSS/Practica 14/css/estilo.css new file mode 100644 index 0000000..9d27154 --- /dev/null +++ b/Practicas/Practicas CSS/Practica 14/css/estilo.css @@ -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; +} \ No newline at end of file diff --git a/Practicas/Practicas CSS/Practica 14/css/estilo14b.css b/Practicas/Practicas CSS/Practica 14/css/estilo14b.css new file mode 100644 index 0000000..64080cf --- /dev/null +++ b/Practicas/Practicas CSS/Practica 14/css/estilo14b.css @@ -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; +} diff --git a/Practicas/Practicas CSS/Propiedad Posittion.txt b/Practicas/Practicas CSS/Propiedad Posittion.txt new file mode 100644 index 0000000..7c78e5e --- /dev/null +++ b/Practicas/Practicas CSS/Propiedad Posittion.txt @@ -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) \ No newline at end of file diff --git a/Practicas/Practicas HTML/Repaso/css/style.css b/Practicas/Practicas HTML/Repaso/css/style.css index 239259e..106aba5 100644 --- a/Practicas/Practicas HTML/Repaso/css/style.css +++ b/Practicas/Practicas HTML/Repaso/css/style.css @@ -13,7 +13,30 @@ body { background-repeat: no-repeat; background-size: cover; font-family: Arial, Helvetica, sans-serif; - padding: 10px; +} + +nav{ + position: sticky; + top: 0; + width: 100%; + background-color: white; +} + +nav hr { + box-shadow:0px 4px 5px 0px; +} + +main{ + padding: 1em; +} + +#servicios,#productos,#contacto{ + padding-top: 70px; + margin-top: -20px; +} + +.menu{ + padding-left: 1em; } .boton_menu { @@ -22,19 +45,15 @@ body { font-size: 40px; } -.prueba { - text-align: center; -} hr { width: 100%; background-color: #1a89dc; height: 2px; + margin-left: 0px; } -h2, -h3, -p { +h2,h3,p { padding: 1em; } @@ -43,18 +62,18 @@ h2 { } table { - width: 90%; + width: 80%; margin: auto; - color: #1a89dc; - font-weight: bold; } table tr td img { - width: 90%; + width: 100%; max-width: 300px; } table tr td { + color: #1a89dc; + font-weight: bold; text-align: center; } @@ -73,10 +92,28 @@ ul { margin: auto; font-weight: bold; } +li{ + list-style-type:circle; +} -/* nav{ - position: sticky; - top: 0; - width: 100%; - background-color: white; -} */ +span{ + color: #1a89dc; + width: 300px; + +} + +iframe{ + width: 100%; + border: 2px solid #1a89dc; + box-sizing: border-box; +} + +#subircaja{ + position: fixed; + right: 10px; + bottom: 10px; +} +#subirimg { + width: 64px; + height: 64px; +} \ No newline at end of file diff --git a/Practicas/Practicas HTML/Repaso/imagenes/icono_subir.png b/Practicas/Practicas HTML/Repaso/imagenes/icono_subir.png new file mode 100644 index 0000000..0846844 Binary files /dev/null and b/Practicas/Practicas HTML/Repaso/imagenes/icono_subir.png differ diff --git a/Practicas/Practicas HTML/Repaso/index OnePage InlineStyle.html b/Practicas/Practicas HTML/Repaso/index OnePage InlineStyle.html index 1bdfb09..ed7a8f5 100644 --- a/Practicas/Practicas HTML/Repaso/index OnePage InlineStyle.html +++ b/Practicas/Practicas HTML/Repaso/index OnePage InlineStyle.html @@ -11,7 +11,7 @@