From d4364785fc8e75e18e4673556283087f1cf924bd Mon Sep 17 00:00:00 2001 From: Marklogo Date: Tue, 12 Dec 2023 13:45:17 +0100 Subject: [PATCH] Dia 14 --- .../Practicas CSS/Practica 14/Practica14.html | 30 ++ .../Practica 14/Practica14b.html | 30 ++ .../Practicas CSS/Practica 14/css/estilo.css | 32 ++ .../Practica 14/css/estilo14b.css | 58 +++ .../Practicas CSS/Propiedad Posittion.txt | 28 ++ Practicas/Practicas HTML/Repaso/css/style.css | 71 +++- .../Repaso/imagenes/icono_subir.png | Bin 0 -> 1197 bytes .../Repaso/index OnePage InlineStyle.html | 2 +- .../Practicas HTML/Repaso/index OnePage.html | 397 +++++++++--------- 9 files changed, 432 insertions(+), 216 deletions(-) create mode 100644 Practicas/Practicas CSS/Practica 14/Practica14.html create mode 100644 Practicas/Practicas CSS/Practica 14/Practica14b.html create mode 100644 Practicas/Practicas CSS/Practica 14/css/estilo.css create mode 100644 Practicas/Practicas CSS/Practica 14/css/estilo14b.css create mode 100644 Practicas/Practicas CSS/Propiedad Posittion.txt create mode 100644 Practicas/Practicas HTML/Repaso/imagenes/icono_subir.png 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 0000000000000000000000000000000000000000..084684465c264f59d0bf046ffb87a12408d1b16c GIT binary patch literal 1197 zcmeAS@N?(olHy`uVBq!ia0vp^CqS5k8A#4*i(3Pv7>k44ofvPP)Tsw@I14-?iy0WW zg+Z8+Vb&Z8prBcRPlzj!mg>AiDzd$J{3B4OP)U$qFoS?Y!}|00-~aDdFbF6}*gwBM zwSQg|0|WCXPZ!6KiaBrRzAf6UAkg~S{Yr+=?ce)vmfyNGvrYAs-f6wd-);Us{=oBM z;*JBirGe&w!3X(EUk_Kze0Fq7<*Z{1uU~nw{uq~kOt^0E#fy)+1D%%^zwMP@cU127 zleZtv?wMM7C+bCCex9n__cEJlPZhtvi2f8I_HlAW?&;*nmhYb1tIciFCUx@Md%KKB zsQ($;HT6j;IUAg(J)Qgh;?^6Alk|30n_Hfpt9$8=^6S|%UvI43{zLT6#;*&e-^kBS zKUGz|eC>li-73z1FG3pbtyKQZm0}cXr!4T%@fho8rjI5m?^bR3Jf+X1rLytI_d9Z- zkE1k%jxW4?!mCI3+55-y>q9bA*#tNpT%;tDU1(Wt0l`PZejm_dggAAKMOr`9_bVX zm>>M}?WuNA#Q%fbZs8M;7drBtJ`$|L=ftG`NY>TQHsat5btmS%Cyw~4h`yNer{lX& zrD%)cO~LmnlU`4h@9|U8XP!GL^6n$$Ls~6ox+}y5(;U;o45~Wjuvn?4tF|_us1y(~ zQo0xC@?fHH&od>$ zK;q*xrK8#=eM literal 0 HcmV?d00001 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 @@