Como utilizar los layout.

div

En este trabajo os pongo como utilizado los div para crearme contenedores para poder hacer la practica.

Captura

Aqui od dejo un videoTutorial.

 

 

Aquí os dejo el código fuente.

<!doctype html>

<html>

<head>

<meta charset=”utf-8″>

<title>Documento sin título</title>

<link type=”text/css” href=”externo.css” rel=”stylesheet”>

</head>

<body>

<div id=”pagina”>

<div id=”cabezera” >

<h1>Ejercicio CS3 – Layout 3 colunnas</h1>

</div>

</div>

<div id=”fondoVerde”>

<p>Colunna de la izquierda en esta colunna podriamos poner varias cosas.                 </p>

</div>

<div id=”fondoAmarillo”>

<p>Colunna de contenido</p>

<p>El contenido de esta pagina irira en esta seccion</p>

<p>El diseño es bastante bueno pero las colunnas no se alrgan todo lo que nos gustaria</p>                         <p>tendremos que hacer posteriormente una version que mejore esto</p>

</div>

<div id=”fondoMorado”>

<p>Colunna de la derecha</p>

</div>

<div>

</div>

<div id=”pie”>     Este es el pie de la pagina.     </div>

</body>

</html>

Aquí un css externo.

@charset “utf-8”;

#pagina{  width:100%;

margin:0px;

background-color:#666;

}

#cabezera

{

background-color:#666;  padding:10px;

}

h1

{  color:#FFF;

}

#fondoVerde

{

float:left;

width:300px;

background-color:#0F3;

}

#fondoAmarillo

{

float:left;

width:765px;

background-color:#FF0;

}

#fondoMorado

{

width:284px;

background-color:#60C;

float:right;

}

#pie

{

background-color:#000;

color:#FFF;

text-align:center;

clear:left;

}

Anuncios