Ejemplo de Plantilla CSS (Ejemplo1)
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:
No hay comentarios.
¡Muchísimas gracias a todos por sus comentarios! Cada uno de ustedes aporta algo único y valioso a la conversación. Nos llena de alegría saber que nuestro contenido les resulta interesante y útil. Sus opiniones y sugerencias nos motivan a seguir mejorando y a crear más artículos que les gusten. ¡Gracias por ser parte de nuestra comunidad! Esperamos seguir compartiendo ideas y aprendiendo juntos.
¡Nos vemos en el próximo post!