Ejercicio CU01032D del tutorial de programación web con CSS desde cero.
Buenas noches. Este es el enunciado del 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.
Acá el código:
<!DOCTYPE html>
<html lang="es">
<head>
<title>
CU01032D
</title>
<meta charset="utf-8"/>
<link rel="stylesheet" type="text/css" href="estilos/CU01032.css"/>
</head>
<body>
<div id="padre">
<div></div>
<div></div>
<div></div>
</div>
</body>
</html>
Acá la hojas de estilos css:
/*Estilos de ejercicio CU01032D*/
#padre div{
width:300px;
height:300px;
margin:40px;
margin:30px;
}
#padre div:first-child{
background-color:blue;
position: relative; left:200px; top:100px;
}
#padre div:nth-child(2){
background-color:brown;
position: relative; right:50px; bottom:50px;
}
#padre div:last-child{
background-color:red;
position: relative; left:450px; bottom:300px;
}
Este es el enunciado del 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.
Acá el código:
<!DOCTYPE html>
<html lang="es">
<head>
<title>
CU01032D
</title>
<meta charset="utf-8"/>
<link rel="stylesheet" type="text/css" href="estilos/2CU01032.css"/>
</head>
<body>
<div><p>Esto</p></div>
<div><p>Es</p></div>
<div><p>Genial</p></div>
</body>
</html>
Acá la hoja de estilos css:
/*Estilos de ejercicio 2 CUO1032*/
div:first-child{
width:600px;
height:600px;
background-color:yellow;
}
div:first-child p{
font-family:Georgia, 'Times New Roman', Times, serif;
font-size: 2em;
text-align:center;
color: purple;
}
div:nth-child(2){
width:400px;
height:400px;
background-color:green;
position: absolute; bottom:25%; left:7.5%;
}
div:nth-child(2) p{
font-family:Georgia, 'Times New Roman', Times, serif;
font-size: 2em;
text-align:center;
color: gainsboro;
}
div:nth-child(3){
width:100px;
height:100px;
background-color:blue;
position: absolute; bottom:45%; left:18.5%;
}
div:nth-child(3) p{
font-family:Georgia, 'Times New Roman', Times, serif;
font-size: 2em;
text-align:center;
color: orange;
}
Este es el enunciado del 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.
Acá el código:
<!DOCTYPE html>
<html lang="es">
<head>
<title>
CU01032D
</title>
<meta charset="utf-8"/>
<link rel="stylesheet" type="text/css" href="estilos/3CU01032.css"/>
</head>
<body>
<div>
<p>
Esta página web utiliza cookies. Si continúa navegando acepta el uso de cookies.
</p>
</div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
</body>
</html>
Acá la hoja de estilos css:
/*Estilos del tercer ejercicio CU01032D*/
*{
margin:0;
padding:0;
font-family:'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}
p{
font-size:30px;
padding:25px;
}
div:first-child{
height:100px;
background-color:#FFFF00;
position: fixed;
width: 97%;
top:-10px;
border: groove #454499 20px;
}
div{
height:200px;
width:200px;
border-top:dashed 10px #32FFCD;
border-right:inset 20px #FF4523;
border-bottom:groove 10px #58DA12;
border-left:inset 30px #FF43FF;
text-align:center;
margin: 20px auto;
}
Si tienen correcciones o sugerencias, se las agradeceré enormemente. Gracias.
Tema: HTML y CSS cómo fijar un contenido para que sea siempre visible en web CU01032D (Leído 2377 veces)
RSS -
WAP2