Ejemplo de Plantilla CSS (Ejemplo1) - Blog de Tecnologia, Ingenieria en Sistemas

Novedades

sábado, 3 de marzo de 2012

Ejemplo de Plantilla CSS (Ejemplo1)


El siguiente ejemplo de plantilla tiene la siguiente estructura:

Encabezado

Cuerpo
       Caja Izquierda para menú
       Caja para Encabezado de Titulo
       Caja de Contenido

Pie de Página

 

Ejemplo de plantilla usando CSS.


Enlace para descargar el ejemplo:


Código HTML del Ejemplo (index.html).


<html>  <head>
  <title>Portafolio Profesional</title>
  <link type="text/css" rel="stylesheet" href="estilos.css" />
  </head>
  <body>
 
  <div class="principal">

    <div class="encabezado1">
    <img src="Cabecera.jpg" alt="image" height="100px" width="1085px">
    </div>
 
    <div class="contenido">
                  <div class="menu">
                  <img src="menu.jpg" alt="image" height="100px" width="200px">
                  <ul>       <li><a href="formacion.html">Formacion</a></li>  </ul>    
                  <ul>       <li><a href="experiencia.html">Experiencia</a></li>  </ul>               
                  <ul>       <li><a href="curriculum.html">Curriculo</a></li>   </ul>    
                  </div>
   
      <div class="encabezado2">
                  <h1>TITULO DE LA PAGINA DE CONTENIDO</h1>
      </div>
    
                  <div class="pagina">
                  <h1>MI CONTENIDO</h1>
                  </div>
    </div>
   
  <div class="piepagina">
  <h1>Web Master: pavillalta@ugb.edu.sv / pavillalta@gmail.com</h1>
  </div>
  </div>
  </body>
</html>

Código CSS del Ejemplo(estilos.css).

body{
                padding:20px;
                margin:20px 60px;
                font-family:Arial;
                font-size: 18px;
                background-color:silver;
}

.principal{
                width: 95%;
                height: 900px;
                background-color: white;
                margin: 20px 20px 20px 20px ;
                border:4px inset purple;
}

.encabezado1{
                width: 96%;
                height: 100px;
                background-color: D0FA58;
                margin: 20px 20px 20px 20px ;
                border:4px inset purple;
}

.encabezado2{
                width: 70%;
                height: 100px;
                float: right;
                background-color: D0FA58;
                margin: 20px 20px 20px 20px ;
                border:4px inset purple;
}

.contenido{
                width: 96%;
                height: 600px;
                background-color: white;
                margin: 20px 20px 20px 20px ;
                border:4px inset purple;
}

.menu{
                width: 20%;
                height: 550px;
                background-color: D0FA58;
                margin: 20px 20px 20px 20px ;
                float: left;
                border:4px inset purple;
                text-align:left;
}

.pagina{
                width: 70%;
                height: 400px;
                background-color: D0FA58;
                margin: 20px 20px 20px 20px ;
                float: right;
                border:4px inset purple;
                text-align:center;
}

.piepagina{
                width: 96%;
                height: 100px;
                background-color: D0FA58;
                margin: 20px 20px 20px 20px ;
                border-color: black;
                border:2px;
                border:4px inset purple;
                font-family:Arial;
                font-size: 10px;
}



Enlace para descargar el ejemplo:




No hay comentarios:

Publicar un comentario

Gracias por su comentario