Differences

This shows you the differences between two versions of the page.

--- es:web_development:layout:position [2022/03/17 13:20]
mag [Etiquetas de Diseño Predefinidas]
+++ es:web_development:layout:position [2023/08/16 09:33] (current)
@@ Line 50: / Line 50: @@
 ==== Posicionamiento Absoluto ====
-  * Ahora pruebe el siguiente código para su <main>elemento.
+  * Agreguemos algo de contenido a la <main>sección.
+<code>    <main>
+        <div class="contenido">Section 1</div>
+        <div class="contenido">Section 2</div>
+        <div class="contenido">Section 3</div>
+    </main></code>
+  * Ahora hagamos que parezca que contiene mucha información. Agregue lo siguiente a su código CSS.
+<code>.contenido {
+  background-color:coral;
+  border:orangered solid 2px;
+  height: 400px;
+}</code>  * Ahora pruebe el siguiente código para su <main>elemento.
 <code>  position: absolute;</code>
   * El <main>elemento no ha cambiado de posición, pero ahora se ha eliminado del flujo del documento en lo que respecta a los demás elementos.
@@ Line 118: / Line 129: @@
 ==== Desbordamiento ====
-  * Hay otra forma de lidiar con páginas grandes si desea tener un pie de página que esté siempre visible. Agreguemos algo de contenido a la <main>sección.
+  * Hay otra forma de lidiar con páginas grandes si desea tener un pie de página que esté siempre visible.
-<code>    <main>
-        <div class="contenido">Section 1</div>
-        <div class="contenido">Section 2</div>
-        <div class="contenido">Section 3</div>
-    </main></code>
-  * Ahora hagamos que parezca que contiene mucha información. Agregue lo siguiente a su código CSS.
-<code>.contenido {
-  background-color:coral;
-  border:orangered solid 2px;
-  height: 400px;
-}</code>
   * Desplázate por la página y verás que nuestra sección naranja de Contenido se desborda <html><main></html> y va más allá <html><footer></html>. Si eso no sucede porque su pantalla es demasiado grande, aumente el valor de <html>height</html> en CSS .
   * Cuando esté listo, agreguemos una barra de desplazamiento a <html><main></html>.
@@ Line 135: / Line 135: @@
   * Ahora mira cómo se comporta la sección Contenido cuando te desplazas.
   * Siéntase libre de jugar con el tipo de posición y los números hasta que se sienta cómodo de entender cómo funciona. No se preocupe por perder el rastro de su código. Estará disponible al comienzo de la siguiente actividad.
+==== Codigo Final ====
+  * [[http://localhost/webdev/code/layout/1/es.php|layout.html]]
+  * [[http://localhost/webdev/code/layout/1/style.php|style.css]]
+  * [[http://localhost/webdev/code/layout/1/layout.html|resultado]]
 [[es:web_development:layout:padding_margin|Siguiente: Relleno y Márgenes]]

Tech School

User Tools

Site Tools

Differences

Page Tools