Foros aprenderaprogramar.com
Aprender a programar => Aprender a programar desde cero => Mensaje iniciado por: Dimitar Stefanov en 12 de Enero 2016, 17:40
-
Mis códigos del ejercicio CU01027D del curso CSS desde cero:
Código HTML:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="description" content="Portal web">
<meta name="keywords" content="programar,cursos">
<link rel="stylesheet" type="text/css" href="estilos32.css">
<title>Ejemplo de border - aprenderaprogramar.com</title>
</head>
<body>
<div id="page">
<div id="header">
</div>
<div id="wrapper">
<div id="menu">
</div>
<div id="body">
<div id="a">div1</div>
<br/><br/>
<div id="b">div2</div>
</div>
</div>
<div id="footer">
</div>
</div>
</body>
</html>
1er Código CSS: "estilos32.css"
#a {
border-top-style: dotted;
border-top-width: 10px;
border-top-color: green;
border-right-style: dashed;
border-right-width: 20px;
border-right-color: blue;
border-bottom-style: double;
border-bottom-width: 10px;
border-bottom-color: #A52A2A;
border-left-style: groove;
border-left-width: 30px;
border-left-color: #2F4F4F;
height: 40px;
}
#b {
border-top-style: inset;
border-top-width: 30px;
border-top-color: #B22222;
border-right-style: solid;
border-right-width: 22px;
border-right-color: #DAA520;
border-bottom-style: double;
border-bottom-width: 25px;
border-bottom-color: #4B0082;
border-left-style: dotted;
border-left-width: 17px;
border-left-color: #808000;
height: 40px;
}
PD: Como pueden ver, he utilizado la propiedad "height" tanto para la primera división como para la segunda para que se puedan ver mejor los resultados.
2o Código CSS:
#a {
border-top: dotted 10px green;
border-right: dashed 20px blue;
border-bottom: double 10px #A52A2A;
border-left: groove 30px #2F4F4F;
height: 40px;
}
#b {
border-top: inset 30px #B22222;
border-right: solid 22px #DAA520;
border-bottom: double 25px #4B0082;
border-left: dotted 17px #808000;
height: 40px;
}
PD: Aquí también he introducido la propiedad "height" con la misma finalidad como en el 1er código CSS.
-
Buenas dimiste
El ejercicio 1 lo veo bien, incluso puedes aumentar el height a 400px y así se ven mejor los bordes
El ejercicio 2 también lo veo bien aunque podrías aplicar la notación shortand más compacta como se hace en https://www.aprenderaprogramar.com/foros/index.php?topic=3154.0
Salu2
-
Gracias Ogramar,
tomo nota sobre la notación abreviada (shortand).