Capas
En la primera entrada de este blog dije que la etiqueta div era una forma de generar una sección o división de la página web, en esta entrada veremos el uso de las capas y algunos de ejemplos sobre como configurarlas.
Es conveniente hacer un pequeño boceto de como debe quedar nuestra página web y las secciones en que diviremos la misma, el código de este trabajo lo escribo a continuación y para mayor facilidad y comprensión les dejo un video-tutorial.
<html>
<head>
<title>Capas</title>
<style type="text/css">
#general {
width:900px;
height:500px;
background:#CCC;
margin:auto;
}
#capa1 {
width:300px;
height:500px;
background:#FF6600;
position:absolute;
}
#capa2 {
width:300px;
height:500px;
background:#36F;
position:absolute;
margin-left:300px;
}
#capa3 {
width:300px;
height:250px;
background:#390;
position:absolute;
margin-left:600px;
}
#capa4 {
width:300px;
height:250px;
background:#996699;
position:absolute;
margin-left:600px;
margin-top:250px;
}
</style>
</head>
<body>
<div id="general">
<div id="capa1">
</div>
<div id="capa2">
</div>
<div id="capa3">
</div>
<div id="capa4">
</div>
</div>
</body>
</html>
No hay comentarios:
Publicar un comentario