Ejemplo de Plantilla CSS (Ejemplo2)

Ejemplo de plantilla usando CSS


Enlace para descargar el ejemplo:


Segundo Ejemplo Diseño Usando Hojas de Estilo


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 publicidad
  • Caja inferior para pie de página

Ejemplo de Plantilla CSS
Ejemplo básico de plantilla web usando Hojas de Estilo CSS
 

Plantilla CSS, Código del Archivo 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>Ejemplo de Plantilla CSS</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 tu sitio web.
      </P>
      </div>
  
     
     <div class="piepagina">
         <h1>
         </div>
   
       <div class="derecho">
           <center><br>
        CONTENEDOR DERECHO
           </center>   
       </div>
      
     </div> <!-- Cierro el contenedor interno-->
  </div>  <!-- Cierro el contenedor global-->

  </body>
</html>



Plantilla CSS, Código del Archivo 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:



Loading...