Ejemplo de plantilla usando CSS
Enlace para descargar el ejemplo:
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 básico de plantilla web usando Hojas de Estilo CSS
Plantilla CSS, Código del Archivo index.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
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:
Desarrollo de sitios web con php, java script, html5, css, tiendas virtuales, manejadores de contenido cms, wordpress y joomla.
No hay comentarios.:
Publicar un comentario
Gracias por tu comentario