f Ejemplo de Plantilla CSS (Ejemplo2) ~ Blog de Tecnologia, Ingenieria en Sistemas Ejemplo de Plantilla CSS (Ejemplo2) | Blog de Tecnologia, Ingenieria en Sistemas

VisitasGratis.es | intercambio manual de visitas gratis
VisitasGratis.es | intercambio manual de visitas gratis


Ejemplo de Plantilla CSS (Ejemplo2)




El siguiente ejemplo de plantilla tiene la siguiente estructura:
  • Encabezado: Para titulo de la página
  • Cuerpo: Con las secciones siguientes. 
  •        Caja izquierda para menú
           Caja central para contenido
           Caja derecha para publicida
  •        Caja inferior para pie de página


Ejemplo de plantilla usando CSS.


Enlace para descargar el ejemplo:


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


<html>
  <head>
  <meta http-equiv="content-type" content="text/html; charset=windows-1250">
  <meta name="generator" content="PSPad editor, www.pspad.com">
  <title>Examen de MIW</title>
 
  <link type="text/css" rel="stylesheet" href="estilos.css" />
 
  </style>
 
  </head>
 
  <body>


  <div class="contenedorglobal">  <!-- contenedor global-->

  <div class="encabezado">
  <h1>TITULO COLOR AZUL CON FONDO GRIS<h1>
  </div>
 
  <div class="contenedorinterno">    <!-- contenedor interno-->
   
      <div class="izquierdo">
      <center><br>
        MI MENU
      </center>     
      </div>
   
          <div class="central">
      <h2>TITULO COLOR ROJO....</h2>
      <P>
      Y este es el texto normal con color verde.
      Las hojas de estilo son lo mejor para el diseÄno de tu sitio web.
      </P>
      </div>
     
     <div class="piepagina">
         <h1>

PIE DE PAGINA COLOR BLANCO FONDO NEGRO webmaster: pavillalta@ugb.edu.sv</h1>
         </div>
   

       <div class="derecho">
           <center><br>
        CONTENEDOR DERECHO
           </center>   
       </div>
      
     </div> <!-- Cierro el contenedor interno-->

  </div>  <!-- Cierro el contenedor global-->
 
  </body>
</html>


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

body{

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

.contenedorglobal{
    width: 95%;
    height: 780px;
    background-color: white;
    margin: 10px 10px 10px 10px ;
    border:2px inset purple;
}

.encabezado
{
    width: 95%;
    height: 75px;
    background-color: #848484;
    margin: 10px 10px 10px 10px ;
    border:2px inset purple;
    color: #0000FF;
    text-align:center;
}


.contenedorinterno{
    width: 95%;
    height: 650px;
    background-color: white;
    margin: 10px 10px 10px 10px ;
    border:2px inset purple;
}

.izquierdo{
    width: 20%;
    height: 500px;
    background-color: D0FA58;
    margin: 10px 10px 10px 10px ;
    float: left;
    border:2px inset purple;
    text-align:center;
    cursor: crosshair;

}

.central{
    width: 57%;
    height: 500px;
    background-color: D0FA58;
    margin: 10px 10px 10px 10px ;
    float: left;
    border:4px inset purple;
    text-align:center;
    color:#298A08;
}

h2{
    color:#FF0000;
}


.piepagina{
    width: 80%;
    height: 75px;
    background-color: #000000;
    margin: 10px 10px 10px 10px ;
    border-color: black;
    border:2px;
    border:2px inset purple;
    font-family:Arial;
    font-size: 10px;
    color:#FFFFFF;
    text-align:center;

    float: left;
}

.derecho
{
    width: 15%;
    height: 600px;
    background-color: D0FA58;
    margin: 10px 10px 10px 10px ;
    border:2px inset purple;
    text-align:top;
    position: relative;
    left:890px;
    top:4px;
  
}



Enlace para descargar el ejemplo:






Comparte en Google Plus