Foros aprenderaprogramar.com
Aprender a programar => Aprender a programar desde cero => Mensaje iniciado por: Jack_F en 02 de Febrero 2017, 07:37
-
Ejercicio del manual básico de programación web con CSS desde cero
Padding y margin CSS. Top, right, bottom, left. Margin negativo y centrar con margin auto. Ejemplos (CU01029D)
EJERCICIO
Crea un documento HTML con 2 elementos div de anchura 250 píxeles, con un margen de 20px en todas direcciones y uno junto al otro (en horizontal). En cada div introduce un texto (p.ej. div 1, div 2) y aplícale los siguientes estilos de borde y relleno a ambos elementos. Color de fondo #FFB6C1. La parte superior con borde de puntos redondeados, grosor 15 píxeles, color #DC143C y relleno de 30 píxeles. La parte derecha con borde de trazos o segmentos rectangulares, grosor 10 píxeles, color verde y relleno de 45 píxeles. La parte inferior con borde de línea doble, grosor 10 píxeles, color #FF00FF y relleno 0 píxeles. La parte izquierda con borde con efecto ridge, grosor 40 píxeles, color #2F4F4F y relleno 60 píxeles.
Código HTML
<!DOCTYPE html>
<html>
<head>
<title>Ejercicio CU01029D hecho por, Jorgito Pucheta</title>
<meta charset="utf-8" />
<link rel="stylesheet" type="text/css" href="estilos.css" />
</head>
<body>
<div class="Div1">DIV 1</div>
<div class="Div2">DIV 2</div>
</body>
</html>
Código CSS
/*Ejercicio CU01029D de aprenderaprogramar.com*/
}
div.Div1, div.Div2 {
width:250px;
margin:20px;
}
/*Border y rellenos*/
div.Div1, div.Div2{
background-color:#FFB6C1;
border-top:dotted 15px #DC143C;
border-right:dashed 10px green;
border-bottom:double 10px #FF00FF;
border-left:ridge 40px #2F4F4F;
padding:30px 45px 0px 60px;
}
Responde a las siguientes preguntas:
a) ¿Cuál es el ancho total ocupado por cada div (incluyendo sus bordes y rellenos)?
b) ¿Cuál es el alto total ocupado por cada div (incluyendo sus bordes y rellenos)?
c) ¿Cuál es el ancho total desde el límite izquierdo del borde del div más a la izquierda hasta el límite derecho del borde del div más a la derecha (teniendo en cuenta márgenes, bordes y rellenos)?
a)445px
b)345px no estoy seguros si es esta cantida, porque el div no se ven tan alto, o porque solo le pusimos ancho(width) y, no altura (height).
c)890px
-
Hola Jorgito.
Tus div aparecen uno debajo del otro, y el enunciado pide que estén uno seguido del otro.
Las respuestas a y c son correctas.
La respuesta b, dependerá del tamaño de letra, del número de líneas, etc.
Saludos. ;D
-
Hola, pedro, me olvide sobre los div. Y gracias por decir como es la respuesta (b) gracias.
Un saludo ;D
-
Hola! muchas gracias por la respuesta.
Estuve viendo que para que un div me fiigure al lado del otro de manera horizontal, se puede aplicar "float". Les paso el codigo CSS por si les sirve, a mí me esta funcionando.
div#primero {border: solid 6px blue; width:250px; margin:20px; float:left;}
div#segundo {border: solid 6px blue; width:250px; margin:20px; float:left;}
Abrazo y gracias por tanta ayuda!