Foros aprenderaprogramar.com
Aprender a programar => C, C++, C#, Java, Visual Basic, HTML, PHP, CSS, Javascript, Ajax, Joomla, MySql y más => Mensaje iniciado por: jimmorrison en 18 de Abril 2015, 19:27
-
Enunciado:
Crea un documento HTML con 10 divisiones, cada una separada de la anterior por dos elementos <br/>. En cada división introduce un texto (p.ej. div 1, div 2, div 3…) y aplícale un estilo de borde diferente utilizando la propiedad border-style.
Respuesta:
Código html:
<!Doctype hmtl>
<html lang="es">
<head>
<title>border</title>
<meta name="description" content="ejercicio de aprender a
programar con border">
<meta name="keywords" content="border programar css
html">
<meta charset="utf-8">
<link rel="stylesheet" href="css/ejercicio_border.css">
</head>
<body>
<div id="divisor_1" class="divisores">
divisor 1
</div>
<br>
<div id="divisor_2" class="divisores">
divisor 2
</div>
<br>
<div id="divisor_3" class="divisores">
divisor 3
</div>
<br>
<div id="divisor_4" class="divisores">
divisor 4
</div>
<br>
<div id="divisor_5" class="divisores">
divisor 5
</div>
<br>
<div id="divisor_6" class="divisores">
divisor 6
</div>
<br>
<div id="divisor_7" class="divisores">
divisor 7
</div>
<br>
<div id="divisor_8" class="divisores">
divisor 8
</div>
<br>
<div id="divisor_9" class="divisores">
divisor 9
</div>
<br>
<div id="divisor_10" class="divisores">
divisor 10
</div>
<br>
<footer>
Hecho por carlos enrique gil chong
</footer>
</body>
</html>
Código css externo
body{background-color: #FA5882;}
.divisores{
text-align: center;
font-size: 2em;
background-color: #F7BE81}
footer{
text-align: center;
font-family: Arial;
}
#divisor_1{
border-top: solid brown 5px;
border-right: hidden blue 5px;
border-bottom: dotted orange 5px;
border-left: solid red 5px;}
#divisor_2{
border-top: groove yellow 5px;
border-right: ridge pink 5px;
border-bottom: inset green 5px;
border-left: outset silver 5px;
}
#divisor_3{
border-top: double blue 5px;
border-right: dotted red 5px;
border-bottom: solid black 5px;
border-left: inset green 5px;
}
#divisor_4{
border-top: double blue 5px;
border-bottom: inset green 5px;
border-right: dotted red 5px;
border-left: inset green 5px;
}
#divisor_5{
border-top: solid brown 5px;
border-right: dotted red 5px;
border-left: solid yellow 5px;
border-bottom: dotted orange 5px;
}
#divisor_6{
border-top: double blue 5px;
border-right: double blue 5px;
border-bottom: double blue 5px;
border-left: double blue 5px;
}
#divisor_7{
border-top: dotted blue 5px;
border-right: dotted blue 5px;
border-bottom: dotted blue 5px;
border-left: dotted blue 5px;
}
#divisor_8{
border-top: inset green 5px;
border-right: inset green 5px;
border-bottom: inset green 5px;
border-left: inset green 5px;
}
#divisor_9{
border-top: outset silver 5px;
border-right: outset silver 5px;
border-bottom: outset silver 5px;
border-left: outset silver 5px;
}
#divisor_10{
border-top: groove yellow 5px;
border-right: groove yellow 5px;
border-bottom: groove yellow 5px;
border-left: groove yellow 5px;
}
-
Hola todo ok solo te hago pequeñas observaciones.
Con el color de fondo body{background-color: #FA5882;} veo peor los bordes, los he visto más claros dejando el fondo blanco body{background-color: white;}
Aquí te falta el ; de cierre background-color: #F7BE81}
Ten en cuenta que a medida que vayas avanzando con el curso css deberías ir dejando de usar separadores <br> y empezar a introducir la separación usando css.
Salu2!
-
gracias por los errores ogramar, pero no se cuales son los separadores ccss ni idea.
voy a buscarlo en internet pero si me puedes orientar seria excelente
-
No me refería a separadores en sí, sino a que para dejar un espacio como haces con el br puedes hacerlo de otras formas usando css, por ejemplo con margin o con otras formas de dejar separación.
Salu2