El siguiente ejemplo de plantilla tiene la siguiente estructura:
Encabezado
Pie de Página
Ejemplo de plantilla usando CSS
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:
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