Desarrollo Web: Maquetación con DIV

Descargar Archivo : Maquetacion con DIV

------------------------------------------------------------------------------------------------------
principal.css
-------------------------------------------------------------------------------------------------------

body {
margin: 0;
padding: 0;
background: #F2F5FE url("../imagenes/fondo.gif") 0 0 repeat-x;
font: 70%/160% "verdana", sans-serif;
color: #192666;
}

a {
color:#192666;
}
a:hover {
color:#4F6AD7;
}

p {
margin: 1em 0;
padding: 0;
}

.clear {
clear: both;
}

h1, h2, h3, h4, h5 {
margin: 1em 0;
padding:0;
}

h1 {
font-size: 260%;
font-family: "georgia", serif;
font-weight: normal;
}

h2 {
font-size:180%;
font-family: "georgia", serif;
font-weight:normal;
}

h3 {
font-size:120%;
font-weight:bold;
}

ul, ol {
margin: 1em 0 1em 2em;
padding:0;
}

/* ---- Layout ------------------------------------------------------------- */

#contenedor {
width: 1000px;
margin-top: 50px;
margin-right: auto;
margin-bottom: 0;
margin-left: auto;
}

#cabecera {
width: 1000px;
position: relative;
height: 100px;
margin: 0;
padding: 0;
background: #233C9B url("../imagenes/cabecera.jpg") no-repeat;
color: #FFF;
}

#contenido {
width: 990px;
background: #FFF;
margin-top: 0;
margin-right: 5px;
margin-bottom: 0;
margin-left: 5px;
}

#contenido #principal {
float: left;
width: 720px;
margin-top: 15px;
background: #FFF;
padding-top: 0;
padding-right: 0;
padding-bottom: 0;
padding-left: 20px;
}

#contenido #secundario {
float: left;
width: 250px;
padding: 0;
background: #CEDBF9 url("../imagenes/fondo_columna.gif") no-repeat;
margin-top: 15px;
margin-right: 0;
margin-bottom: 0;
margin-left: 0;
}

#pie {
clear: both;
height: 60px;
margin-bottom: 50px;
background: url("../imagenes/fondo_pie.jpg") no-repeat;
color: #6685CC;
position: relative;
}

/* ---- Cabecera ----------------------------------------------------------- */
#cabecera #logo {
position: absolute;
top: 35px;
left: 35px;
margin: 0;
width: 170px;
}

#cabecera #logo a {
color: #FFF;
display: block;
line-height: 35px;
}

#cabecera #logo a:hover {
color: #B5C4E3;
text-decoration: underline;
}

#cabecera #buscador {
position: absolute;
top: 40px;
right: 20px;
}

#cabecera #buscador legend {
display: none;
}

#cabecera #buscador fieldset {
border: none;
}

/* ---- Menú --------------------------------------------------------------- */
#menu {
background: #192666;
margin: 0 5px;
padding: 10px 0 0 0;
}

#menu ul {
margin: 0 10px;
padding: 0;
list-style:none;
}

#menu ul li {
margin: 0 5px 0 0;
padding: 0;
float:left;
}

#menu ul li a {
display: block;
position: relative;
padding: 5px 15px;
border: 0;
background: #253575;
color: #B5C4E3;
font-weight: bold;
text-decoration: none;
cursor: pointer;
}

#menu ul li a:hover {
background-color: #FFFFFF;
color: #FF902E;
}

#menu ul li.seleccionado a {
color: #FF9000;
background-color: #253575;
}

/* ---- Contenidos --------------------------------------------------------- */
#contenido .articulo {
clear: both;
margin: 0;
padding: 20px;
background: url("../imagenes/fondo_articulo.jpg") no-repeat;
}

#contenido .articulo h2 {
margin: 0 -20px;
padding: 10px;
background: #DEE5FD;
color: #192666;
}

#contenido .info {
margin: 10px 0;
padding-bottom: 8px;
border-bottom: 1px solid #DEE5FD;
color:#6685CC;
}

#contenido .info a { color:#6685CC; }
#contenido .info a:hover { color:#FF9000; }

#contenido .info span.fecha, #contenido .info span.categoria, #contenido .info span.autor, #contenido .info span.comentarios {
padding-left:15px;
}

#contenido .info span.fecha { background: url("../imagenes/icono_fecha.gif") 0 50% no-repeat; }
#contenido .info span.categoria { background: url("../imagenes/icono_categoria.gif") 0 50% no-repeat; margin-left: 8px; }
#contenido .info span.autor { background: url("../imagenes/icono_autor.gif") 0 50% no-repeat; margin-left: 8px; }
#contenido .info span.comentarios { background: url("../imagenes/icono_comentarios.gif") 0 50% no-repeat; margin-left: 8px; }

#contenido #secundario h3 {
padding: 10px 0 10px 10px;
margin-top: 20px;
background: #A0B9F3;
color: #192666;
}

#contenido #secundario #sobremi img {
float: left;
margin: 4px 5px 0 0;
}

#contenido #secundario #sobremi p {
}

#contenido #secundario div {
padding: 0 10px;
}

#contenido #secundario ul {
margin: 15px 0;
padding: 0;
list-style:none;
}

#contenido #secundario li {
margin: 0;
padding: 0;
border-bottom: 1px solid #E0E8FA;
}

#contenido #secundario li a {
display: block;
padding: 3px 0 3px 22px;
background: url("../imagenes/icono_elemento.gif") 8px no-repeat;
text-decoration: none;
}

#contenido #secundario li a:hover {
background-color: #E0E8FA;
color: #192666;
}

#contenido #secundario li.seleccionado a {
background: #E0E8FA url("../imagenes/icono_elemento_seleccionado.gif") 8px no-repeat;
font-weight: bold;
}

/* ---- Pie ---------------------------------------------------------------- */
#pie p {
margin: 0;
padding: 0;
position: absolute;
top: 10px;
left: 40px;
}

---------------------------------------------------------------------------------------------------------------
index.html
---------------------------------------------------------------------------------------------------------------
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="es" lang="es">
<head>

<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<meta http-equiv="content-language" content="es" />

<meta name="copyright" content="Design/Code: Vit Dlouhy [Nuvio - www.nuvio.cz]; e-mail: vit.dlouhy@nuvio.cz" />

<title>Mi sitio web</title>
<meta name="description" content="Mi sitio web" />
<meta name="keywords" content="sitio, web" />

<link rel="index" href="./" title="Inicio" />
<link rel="stylesheet" media="screen,projection" type="text/css" href="./css/principal.css" />
</head>

<body>


<div id="contenedor">


<div id="cabecera">


<h1 id="logo"><a href="./" title="Mi sitio web">Mi sitio web</a></h1>


<div id="buscador">
<form action="" method="get">
<fieldset>
<legend>Buscador</legend>
<input type="text" name="busqueda" size="30" />
<input type="submit" name="botonbuscar" value="Buscar" />
</fieldset>
</form>
</div> 

<div class="clear"></div>
</div> 


<div id="menu">
<ul>
<li class="seleccionado"><a href="index.html">Inicio</a></li>
<li ><a href="blog.html">Blog</a></li>
<li><a href="#">Sobre mi</a></li>
<li><a href="#">Fotos</a></li>
<li><a href="#">Portfolio</a></li>
<li><a href="#">Contacto</a></li>
<li><a href="#">Enlaces</a></li>
</ul>

<div class="clear"></div>
</div> 


<div id="contenido">


<div id="principal">


<div class="articulo">
<h2><a href="#">BIENVENIDOS A MI PAGINA WEB</a></h2>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aliquam pellentesque enim blandit enim bibendum blandit.
Integer eu leo ac est aliquet imperdiet. Quisque nec justo id augue posuere malesuada. Nullam ac metus. Cras non leo
ut est placerat condimentum.</p>

<p class="btn-more"><a href="#">Seguir leyendo...</a></p>
</div> 

<div class="clear"></div>



<div class="clear"></div>



<div class="clear"></div>

</div>


<div id="secundario">


<h3><a href="#">Sobre mí</a></h3>

<div id="sobremi">
<img src="imagenes/mifoto.gif" alt="Mi foto" />
<p><strong>Nombre apellidos</strong><br />
Edad<br />
Ciudad de residencia<br />
<a href="#">Mi perfil público</a></p>
</div> 

<div class="clear"></div>


<h3>Categorías</h3>

<ul id="categorias">
<li class="seleccionado"><a href="#">Categoría 1</a></li>
<li><a href="#">Categoría 2</a></li>
<li><a href="#">Categoría 3</a></li>
<li><a href="#">Categoría 4</a></li>
<li><a href="#">Categoría 5</a></li>
</ul>

<div class="clear"></div>


<h3>Archivo</h3>

<ul id="archivo">
<li class="seleccionado"><a href="#">Enero 200X</a></li>
<li><a href="#">Diciembre 200X</a></li>
<li><a href="#">Noviembre 200X</a></li>
<li><a href="#">Octubre 200X</a></li>
<li><a href="#">Septiembre 200X</a></li>
</ul>

<div class="clear"></div>


<h3>Enlaces</h3>

<ul id="enlaces">
<li><a href="#">Enlace 1</a></li>
<li><a href="#">Enlace 2</a></li>
<li><a href="#">Enlace 3</a></li>
<li><a href="#">Enlace 4</a></li>
<li><a href="#">Enlace 5</a></li>
</ul>

<div class="clear"></div>

</div> 

<div class="clear"></div>
</div> 


<div id="pie">
<p id="copyright">© 2015 karlosrivas@gmail.com</p>
</div> 

</div> 

</body>
</html>

------------------------------------------------------------------------------------------------------------------------

blog.html

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<head>

<!-- Este diseño está basado en un diseño web libre llamado CrystalX y que se puede descargar desde

la dirección http://www.oswd.org/design/preview/id/3465 -->

<title>Mi sitio web</title>

</head>

<body>

<h1 id="logo"><a href="./" title="Mi sitio web">Mi sitio web</a></h1>

<legend>Buscador</legend>

</fieldset>

</form>

</div>

</div>

<ul>

<li><a href="index.html">Inicio</a></li>

<li><a href="#">Sobre mi</a></li>

<li><a href="#">Fotos</a></li>

<li><a href="#">Portfolio</a></li>

<li><a href="#">Contacto</a></li>

<li><a href="#">Enlaces</a></li>

</ul>

</div>

<h2><a href="#">Articulo 01</a></h2>

<span class="categoria"><a href="#">diseño</a></span>

<span class="autor"><a href="#">Nombre Apellido</a></span>

<span class="comentarios"><a href="#">Añadir comentario</a></span>

</p>

<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aliquam pellentesque enim blandit enim bibendum blandit.

Integer eu leo ac est aliquet imperdiet. Quisque nec justo id augue posuere malesuada. Nullam ac metus. Cras non leo

ut est placerat condimentum.</p>

<p class="btn-more"><a href="#">Seguir leyendo...</a></p>

</div>

<h2><a href="#">Articulo 02</a></h2>

<span class="categoria"><a href="#">diseño</a></span>

<span class="autor"><a href="#">Nombre Apellido</a></span>

<span class="comentarios"><a href="#">Añadir comentario</a></span>

</p>

<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aliquam pellentesque enim blandit enim bibendum blandit.

Integer eu leo ac est aliquet imperdiet. Quisque nec justo id augue posuere malesuada. Nullam ac metus. Cras non leo

ut est placerat condimentum.</p>

<p class="btn-more"><a href="#">Seguir leyendo...</a></p>

</div>

<h2><a href="#">Articulo 03</a></h2>

<span class="categoria"><a href="#">diseño</a></span>

<span class="autor"><a href="#">Nombre Apellido</a></span>

<span class="comentarios"><a href="#">Añadir comentario</a></span>

</p>

<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aliquam pellentesque enim blandit enim bibendum blandit.

Integer eu leo ac est aliquet imperdiet. Quisque nec justo id augue posuere malesuada. Nullam ac metus. Cras non leo

ut est placerat condimentum.</p>

<p class="btn-more"><a href="#">Seguir leyendo...</a></p>

</div>

</div>

<h3><a href="#">Sobre mí</a></h3>

<p><strong>Nombre apellidos</strong><br />

Edad<br />

Ciudad de residencia<br />

<a href="#">Mi perfil público</a></p>

</div>

<h3>Categorías</h3>

<li class="seleccionado"><a href="#">Categoría 1</a></li>

<li><a href="#">Categoría 2</a></li>

<li><a href="#">Categoría 3</a></li>

<li><a href="#">Categoría 4</a></li>

<li><a href="#">Categoría 5</a></li>

</ul>

<h3>Archivo</h3>

<li class="seleccionado"><a href="#">Enero 200X</a></li>

<li><a href="#">Diciembre 200X</a></li>

<li><a href="#">Noviembre 200X</a></li>

<li><a href="#">Octubre 200X</a></li>

<li><a href="#">Septiembre 200X</a></li>

</ul>

<h3>Enlaces</h3>

<li><a href="#">Enlace 1</a></li>

<li><a href="#">Enlace 2</a></li>

<li><a href="#">Enlace 3</a></li>

<li><a href="#">Enlace 4</a></li>

<li><a href="#">Enlace 5</a></li>

</ul>

</div>

</div>

</div>

</div>

</body>

</html>

Desarrollo Web

viernes, 6 de febrero de 2015

Maquetación con DIV

No hay comentarios:

Publicar un comentario