Autor Tema: CSS ejemplos de diferentes tipos de bordes (punteado, trazos, doble...) CU01026D (Leído 3508 veces)

Pandemia · « **en:** 08 de Febrero 2016, 18:15 »

Aquí os dejo el código html y css haber que os parece; yo creo que está todo más o menos bien. Gracias de antemano por vuestro tiempo

Código: [Seleccionar]


<!DOCTYPE html>
<html lang="es">

<head>

<meta name="description" content="portal web aprenderaprogramar.com">
<meta name="keywords" content="tipos de borde css, border-style, none, hidden, dotted, solid...,
	efectos 3d, border-top, right, bottom">
<meta charset="utf-8">
<link rel="stylesheet"type="text/css"href="estilos10.css">

</head>

<header>
	<h1>Tipos de bordes en css </h1>
</header>

<body>


<p>

<div id="wrapper">

	<div id="div1">
	
	Primera división
	
	</div>
	
	<br/>
	<br/>

	<div id="div2">
	
	Segunda división
	
	</div>
	
	<br/>
	<br/>
	
	<div id="div3">
	
	Tercera división
	
	</div>
	<br/>
	<br/>
	
	<div id="div4"> 
	
	Cuarta división
	
	</div>
	<br/>
	<br/>
	
	<div id="div5">
	
	<img src="c:/EJERCICIOS CURSO CSS/simson.jpg">
	<div id="wrapper">
	Quinta división 
	</div>
	</div>
	<br/>
	<br/>
	
	<div id="div6">
	
	<img src="c:/EJERCICIOS CURSO CSS/niño.jpg"/>
	<div id="wrapper">
	Sexta división
	</div>
	</div>
	<br/>
	<br/>
	
	<div id="div7">
	
	Septima división
	
	</div>
	<br/>
	<br/>
	
	<div id="div8">
	
	Octava división
	
	</div>
	<br/>
	<br/>
	
	<div id="div9">
	
	Novena división
		
	</div>
	<br/>
	<br/>
	
	
	<div id="div10">
	
	Decima división
	
	</div>
	<br/>
	<br/>
	
</div>	
</p>
</body>
</html>

Y ahora el CSS...

Código: [Seleccionar]


/*Tipos de bordes css. ejercicio CU01026D */
h1{background-color: rgb(128, 144, 188);border: solid black 4px;
 }
 
#wrapper{text-align: center;
}


#div1{border-style: dashed; border-width: 5px;
}
#div2{border-style: dotted;border-width: 4px; border-color: green;
}
#div3{border-style: solid; border-width: 4px;
}
#div4{border-style: double;border-width: 4px; border-color: red;
}
#div5{border-top-style: groove;border-right-style: solid;border-bottom-style: double;border-left-style: dotted;border-color: brown;
border-width: 5px;}
#div6{border-top-style: inset;border-right-style: dashed;border-bottom-style: outset;border-left-style: inset;border-color: gray;
border-width: 8px;}

#div7{border-top-style: hidden;border-right-style: dotted;border-bottom-style: double;border-left-style: outset;border-color: red;
border-width: 10px;}
#div8{border-top-style: inset;border-right-style: outset;border-bottom-style: groove;border-left-style: inset;border-color: green;
border-width: 10px;}
#div9{border-left-style: solid; border-bottom-style: dotted;border-right-style: double;border-top-style: dashed;border-color: blue;
border-width: 10px;}
#div10{border-bottom-style: outset;border-left-style: dashed;border-right-style: groove;border-top-style: solid;border-color: yellow;
border-width: 10px;}

Mario R. Rancel · « **Respuesta #1 en:** 10 de Febrero 2016, 08:55 »

Buenos días

El ejercicio está bien, cumpliendo con lo que se pedía. Como recomendación, a la hora de tomar imágenes es preferible tomar urls en lugar de rutas locales, ya que las imágenes locales sólo las puedes ver operando desde tu pc, mientras que las urls pueden ser vistas por cualquier persona con conexión a internet.

Ejemplo ruta local:

Código: [Seleccionar]

<img src="c:/EJERCICIOS CURSO CSS/simson.jpg">
Ejemplo con url:

Código: [Seleccionar]

<img src="http://cdnb.20m.es/trasdos/files/2011/07/Simpsons_on_Tracey_Ullman.png">
Nota: tienes una cosa extraña, que es una etiqueta <p> envolviendo a todos los elementos de la página. Esa etiqueta deberías eliminarla.

Saludos

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

Noticias: