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 


Primer Ejemplo Hojas de Estilo CSS

Ejemplo de plantilla usando CSS

Un ejemplo sencillo para diseño de secciones en una página web, usando la etiqueta <div> el ejemplo se trabaja con un archivo HTML y un archivo CSS externo.


Enlace para descargar códigos del 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: