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

Publicado el 19 noviembre, 2013 en Desarrollo de Interfaces Web. Añade a favoritos el enlace permanente. Comentarios desactivados en Como utilizar los layout..

Los comentarios están cerrados.

A %d blogueros les gusta esto: