Hola a todos !! Dejo a continuación los 3 ejercicios propuestos en la clase CU01032D del curso gratuito de programación CSS con HTML. Desde ya muchas gracias por la atención.
Un saludo, Luis
EJERCICIO 1
Define un documento HTML con un div padre (divPadre), dentro del cual existan otras 3 cajas contenedoras div (div1, div2 y div3), cada una de ellas con unas dimensiones de 300x300px, 40 píxeles de margin en todas direcciones, 30 píxeles de padding en todas direcciones y un background color diferente. Usando posicionamiento relativo genera un desplazamiento de los div de la siguiente manera:
a) El div 1 deberá desplazarse 200 píxeles a la derecha y 100 píxeles hacia abajo respecto a lo que sería su posición normal.
b) El div 2 deberá desplazarse 50 píxeles a la izquierda y 50 píxeles hacia arriba respecto a lo que sería su posición normal.
c) El div 3 deberá desplazarse 450 píxeles a la derecha y 300 píxeles hacia arriba respecto a lo que sería su posición normal.
<!DOCTYPE html>
<html>
<head>
<title>"Ejercicio 1 - CU01032D"</title>
<meta charset="utf-8">
<link rel="stylesheet" type="text/CSS" href="estilos.css">
</head>
<body>
<div id="divPadre">
<div id="div1">
</div>
<div id="div2">
</div>
<div id="div3">
</div>
</div>
</body>
</html>
Hoja de estilos del Ejercicio 1
/* Curso CSS estilos aprenderaprogramar.com*/
* {
margin:0;
}
#divPadre{
position:relative;
left:0px; top:0px;
}
#div1{
position:relative;
margin:40px; padding:30px;
width:300px; height:300px;
background-color:#FADBD8;
left:200px; top:100px;
}
#div2{
position:relative;
margin:40px; padding:30px;
width:300px; height:300px;
background-color: #D6EAF8;
left:-50px; top:-50px;
}
#div3{
position:relative;
margin:40px; padding:30px;
width:300px; height:300px;
background-color:#F9E79F;
left:450px; top:-300px;
}
EJERCICIO 2
Define un documento HTML con 3 cajas contenedoras div (div1, div2 y div3), la primera con unas dimensiones de 600x600px y un background color amarillo. La segunda con dimensiones 400x400px y un background color verde. La tercera con dimensiones 100x100px y background color azul. Usando posicionamiento absoluto establece para el div2 y el div3 el mismo origen que para el div1, de modo que el efecto generado sea ver un cuadrado amarillo dentro del cual hay un cuadrado verde dentro del cual hay un cuadrado azul.
<!DOCTYPE html>
<html>
<head>
<title>"Ejercicio 2 - CU01032D"</title>
<meta charset="utf-8">
<link rel="stylesheet" type="text/CSS" href="estilos.css">
</head>
<body>
<div id="div1">
</div>
<div id="div2">
</div>
<div id="div3">
</div>
</body>
</html>
Hoja de estilos del Ejercicio 2
/* Curso CSS estilos aprenderaprogramar.com*/
* {
margin:0;
}
div{
position:absolute;
left:0px; top:0px;
}
#div1{
width:600px; height:600px;
background-color:yellow;
}
#div2{
width:400px; height:400px;
background-color:blue;
}
#div3{
width:100px; height:100px;
background-color:green;
left:0px; bottom:0px;
}
EJERCICIO 3
Define un documento HTML con varios div que contengan suficiente texto como para que la página se muestre con scroll (barras de desplazamiento). El primero de los div debe contener el texto <<Esta página web utiliza cookies. Si continúa navegando acepta el uso de cookies.>>, un valor height (altura) de 100 píxeles y color de fondo amarillo. Usando posicionamiento fixed, fija este div en la parte superior de la página de modo que se continúe visualizando aún cuando hagamos scroll.
<!DOCTYPE html>
<html>
<head>
<title>"Ejercicio 3 - CU01032D"</title>
<meta charset="utf-8">
<link rel="stylesheet" type="text/CSS" href="estilos.css">
</head>
<body>
<div id="fijo">
<p>Esta página web utiliza cookies. Si continúa navegando acepta el uso de cookies.</p>
</div>
<div id="movil">
<div>
<h1> Ejercicio 3 - CU01032D www.aprenderaprogramar.com<h1>
</div>
</br>
<div>
<p>Los siguientes textos fueron tomados de <a href="http://www.blindtextgenerator.com/es">www.blindtextgenerator.com/es</a>
para que no llamen al psiquiatrico !!" Son textos del tipo "Lorem ipsum", que se usan habitualmente en diseño gráfico en demostraciones de tipografías o de borradores de diseño para probar el diseño visual antes de insertar el texto final.
Aunque no posee actualmente fuentes para justificar sus hipótesis, el profesor de filología clásica Richard McClintock asegura que su uso se remonta a los impresores de comienzos del siglo XVI. Su uso en algunos editores de texto muy conocidos en la actualidad ha dado al texto lorem ipsum nueva popularidad.
El texto en sí no tiene sentido, aunque no es completamente aleatorio, sino que deriva de un texto de Cicerón en lengua latina, a cuyas palabras se les han eliminado sílabas o letras. El significado del texto no tiene importancia, ya que solo es una demostración o prueba, pero se inspira en la obra de Cicerón De finibus bonorum et malorum (Sobre los límites del bien y del mal) <p>
</div>
</br>
<div>
<h2>Muy lejos, más allá...</h2>
<p>Muy lejos, más allá de las montañas de palabras, alejados de los países de las vocales y las consonantes, viven los textos simulados. Viven aislados en casas de letras, en la costa de la semántica, un gran océano de lenguas. Un riachuelo llamado Pons fluye por su pueblo y los abastece con las normas necesarias. Hablamos de un país paraisomático en el que a uno le caen pedazos de frases asadas en la boca. Ni siquiera los todopoderosos signos de puntuación dominan a los textos simulados; una vida, se puede decir, poco ortográfica. Pero un buen día, una pequeña línea de texto simulado, llamada Lorem Ipsum, decidió aventurarse y salir al vasto mundo de la gramática. El gran Oxmox le desanconsejó hacerlo, ya que esas tierras estaban llenas de comas malvadas, signos de interrogación salvajes y puntos y coma traicioneros, pero el texto simulado no se dejó atemorizar. Empacó sus siete versales, enfundó su inicial en el cinturón y se puso en camino. Cuando ya había escalado las primeras colinas de las montañas cursivas, se dio media vuelta para dirigir su mirada por última vez, hacia su ciudad natal Letralandia, el encabezamiento del pueblo Alfabeto y el subtítulo de su...</p>
</div>
</br>
<div>
<h2>Don Quijote </h2>
<p>Y, viéndole don Quijote de aquella manera, con muestras de tanta tristeza, le dijo: Sábete, Sancho, que no es un hombre más que otro si no hace más que otro. Todas estas borrascas que nos suceden son señales de que presto ha de serenar el tiempo y han de sucedernos bien las cosas; porque no es posible que el mal ni el bien sean durables, y de aquí se sigue que, habiendo durado mucho el mal, el bien está ya cerca. Así que, no debes congojarte por las desgracias que a mí me suceden, pues a ti no te cabe parte dellas.Y, viéndole don Quijote de aquella manera, con muestras de tanta tristeza, le dijo: Sábete, Sancho, que no es un hombre más que otro si no hace más que otro. Todas estas borrascas que nos suceden son señales de que presto ha de serenar el tiempo y han de sucedernos bien las cosas; porque no es posible que el mal ni el bien sean durables, y de aquí se sigue que, habiendo durado mucho el mal, el bien está ya cerca. Así que, no debes congojarte por las desgracias que a mí me suceden, pues a ti no...</p>
</div>
</br>
<div>
<h2>Penas del joven Werther </h2>
<p>Reina en mi espíritu una alegría admirable, muy parecida a las dulces alboradas de la primavera, de que gozo aquí con delicia. Estoy solo, y me felicito de vivir en este país, el más a propósito para almas como la mía, soy tan dichoso, mi querido amigo, me sojuzga de tal modo la idea de reposar, que no me ocupo de mi arte. Ahora no sabría dibujar, ni siquiera hacer una línea con el lápiz; y, sin embargo, jamás he sido mejor pintor Cuando el valle se vela en torno mío con un encaje de vapores; cuando el sol de mediodía centellea sobre la impenetrable sombra de mi bosque sin conseguir otra cosa que filtrar entre las hojas algunos rayos que penetran hasta el fondo del santuario, cuando recostado sobre la crecida hierba, cerca de la cascada, mi vista, más próxima a la tierra, descubre multitud de menudas y diversas plantas; cuando siento más cerca de mi corazón los rumores de vida de ese pequeño mundo que palpita en los tallos de las hojas, y veo las formas innumerables e infinitas de los gusanillos y de los insectos; cuando siento, en fin, la presencia del Todopoderoso, que nos ha creado...</p>
</div>
</br>
<div>
<h2>Kafka</h2>
<p>Una mañana, tras un sueño intranquilo, Gregorio Samsa se despertó convertido en un monstruoso insecto. Estaba echado de espaldas sobre un duro caparazón y, al alzar la cabeza, vio su vientre convexo y oscuro, surcado por curvadas callosidades, sobre el que casi no se aguantaba la colcha, que estaba a punto de escurrirse hasta el suelo. Numerosas patas, penosamente delgadas en comparación con el grosor normal de sus piernas, se agitaban sin concierto. - ¿Qué me ha ocurrido? No estaba soñando. Su habitación, una habitación normal, aunque muy pequeña, tenía el aspecto habitual. Sobre la mesa había desparramado un muestrario de paños - Samsa era viajante de comercio-, y de la pared colgaba una estampa recientemente recortada de una revista ilustrada y puesta en un marco dorado. La estampa mostraba a una mujer tocada con un gorro de pieles, envuelta en una estola también de pieles, y que, muy erguida, esgrimía un amplio manguito, asimismo de piel, que ocultaba todo su antebrazo. Gregorio miró hacia la ventana; estaba nublado, y sobre el cinc del alféizar repiqueteaban las gotas de lluvia, lo que le hizo sentir una gran melancolía. «Bueno -pensó-; ¿y si siguiese durmiendo un rato y me olvidase de...</p>
</div>
</br>
<div>
<h2>Pangrama</h2>
<p>Quiere la boca exhausta vid, kiwi, piña y fugaz jamón. Fabio me exige, sin tapujos, que añada cerveza al whisky. Jovencillo emponzoñado de whisky, ¡qué figurota exhibes! La cigüeña tocaba cada vez mejor el saxofón y el búho pedía kiwi y queso. El jefe buscó el éxtasis en un imprevisto baño de whisky y gozó como un duque. Exhíbanse politiquillos zafios, con orejas kilométricas y uñas de gavilán. El cadáver de Wamba, rey godo de España, fue exhumado y trasladado en una caja de zinc que pesó un kilo. El pingüino Wenceslao hizo kilómetros bajo exhaustiva lluvia y frío, añoraba a su querido cachorro. El veloz murciélago hindú comía feliz cardillo y kiwi. La cigüeña tocaba el saxofón detrás del palenque de paja.Quiere la boca exhausta vid, kiwi, piña y fugaz jamón. Fabio me exige, sin tapujos, que añada cerveza al whisky. Jovencillo emponzoñado de whisky, ¡qué figurota exhibes! La cigüeña tocaba cada vez mejor el saxofón y el búho pedía kiwi y queso. El jefe buscó el éxtasis en un imprevisto baño de whisky y gozó como un duque. Exhíbanse politiquillos zafios, con orejas kilométricas y uñas de gavilán. El cadáver de Wamba, rey godo de España, fue...</p>
</div>
</div>
</body>
</html>
Hoja de estilos del ejercicio 3
/* Curso CSS estilos aprenderaprogramar.com*/
* {
margin:0;
}
#fijo{
height:100px;
background-color:RGBA(244, 248, 126,0.5);
position:fixed;
font-weight:bold;
color:gray;
}
#movil{
position:relative;
left:10px;
top:120px;
width:90%;
}
Tema: Propiedad position CSS: static relative absolute fixed.Top right bottom CU01032D (Leído 2124 veces)
RSS -
WAP2