Foros aprenderaprogramar.com
Aprender a programar => Aprender a programar desde cero => Mensaje iniciado por: KOFFERO en 08 de Noviembre 2017, 06:21
-
Ejercicio CU01025D del tutorial de programación CSS desde cero:
Enunciado:
EJERCICIO
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.
Código HTML:
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8" />
<title>Ejercicio CU01025D</title>
<link rel="stylesheet" type="text/css" href="estilos.css" />
</head>
<body>
<div id="div1">Div 1</div><br/><br/>
<div id="div2">Div 2</div><br/><br/>
<div id="div3">Div 3</div><br/><br/>
<div id="div4">Div 4</div><br/><br/>
<div id="div5">Div 5</div><br/><br/>
<div id="div6">Div 6</div><br/><br/>
<div id="div7">Div 7</div><br/><br/>
<div id="div8">Div 8</div><br/><br/>
<div id="div9">Div 9</div><br/><br/>
<div id="div10">Div 10</div><br/><br/>
</body>
</html>
Código CSS:
div {
font-size:36px;
width: 50%;
margin: 0 auto;
text-align: center;
background-color: #4CC1DE;
}
#div1 {
border-style: solid; border-width: 3px;
}
#div2 {
border-style: inset; border-width: 3px;
}
#div3 {
border-style: outset; border-width: 3px;
}
#div4 {
border-style: dashed; border-width: 3px;
}
#div5 {
border-style: dotted; border-width: 3px;
}
#div6 {
border-style: double; border-width: 3px;
}
#div7 {
border-style: groove; border-width: 3px;
}
#div8 {
border-style: ridge; border-width: 3px;
}
#div9 {
border-style: none; border-width: 4px;
}
#div10 {
border-style: hidden; border-width: 4px;
}
Un saludo. ;) ;) ;) ;)
-
Hola Jorge,,, ejercicio correcto.
Saludos