Autor Tema: Tipos de borde CSS. border-style hidden, solid... Efectos 3D. border-top right b (Leído 4235 veces)

jimmorrison · « **en:** 18 de Abril 2015, 19:27 »

Enunciado:

Citar

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:

Código: [Seleccionar]

<!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

Código: [Seleccionar]

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;
}

Ogramar · « **Respuesta #1 en:** 19 de Abril 2015, 21:50 »

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!

jimmorrison · « **Respuesta #2 en:** 20 de Abril 2015, 02:14 »

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

Ogramar · « **Respuesta #3 en:** 20 de Abril 2015, 08:23 »

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

Foros aprenderaprogramar.com
Didáctica y divulgación de la programación

Noticias:

Autor Tema: Tipos de borde CSS. border-style hidden, solid... Efectos 3D. border-top right b (Leído 4235 veces)

jimmorrison

Tipos de borde CSS. border-style hidden, solid... Efectos 3D. border-top right b

Ogramar

Re:Tipos de borde CSS. border-style hidden, solid... Efectos 3D. border-top right b

jimmorrison

Re:Tipos de borde CSS. border-style hidden, solid... Efectos 3D. border-top right b

Ogramar

Re:Tipos de borde CSS. border-style hidden, solid... Efectos 3D. border-top right b

Preguntas y respuestas