Estructura Básica de DIVs

por Admin — Última modificación 20/10/2008 10:39

— archivado en: Ejercicio, Apuntes, Ejemplo

Un ejemplo de una estructura de Capas sencillo.

Ejemplo-uso-basico-DIVs.html — HTML, 1Kb

Contenido del Archivo

<html>
<head>
  <title>Ejemplo Basico Uso Div</title>
  <style type="text/css">

body{ background-color: #000fff;}
#titulo{
background-color: #0088ff;
margin: 8px 8px 8px 8px;
border: 8px 8px 8px 8px;
padding: 8px 8px 8px 8px;
left: 0;
width: 95%;
height: 20%;
top: 0;
}
h1,h3{text-align: center;
}
#cuerpoizq{
position: absolute;
left: 0;
width: 45%;
height: 75%;
bottom: 0;
background: #00FFCC;
}
#cuerpodch{
position: absolute;
right: 0;
width: 45%;
height: 75%;
bottom: 0;
background: #00FFCC;
}
p: first-letter { 
font-family: serif;
font-size: 500%;
float: left;
color: gray;
}-->
  </style>
</head>

<body>

<div id="titulo">
<h1>Mi-P�na.Com</h1>
</div>

<div id="cuerpodch">
<h3>Esta es la p�na de Mi-Pagina s.a.</h3>
<img src = "imagen.jpg" alt = "mi frase alternativa" width = "24px" height = "24px"><p: first-letter>Bla, bla, bla, la, bla, bla la, bla, bla la, bla, bla la, bla, bla la, bla,
bla la, bla, bla la, bla, bla </p></div>

<div id="cuerpoizq">
<h3>Esta es la p�na de Su-Pagina s.coop.</h3>
<img src = "imagen.jpg" alt = "mi frase alternativa" width = "24px" height = "24px"><p: first-letter>Bla, bla, bla, la, bla, bla la, bla, bla la, bla, bla la, bla, bla la, bla,
bla la, bla, bla la, bla, bla </p></div>
</body>
</html>