<head>
<title>pagina heber</title>
<meta charset="utf-8">
<link rel="stylesheet" type="text/css" href="css/estilos.css">
</head>
<body>
<table align="center" border="0" width="900" bgcolor="gray" class="table1">
<tr>
<td>
<img src="imagenes/encabezado.jpg" align="center">
</td>
</tr>
<tr>
<td>
<div id="menu">
<a href="mision.html" target="marco"><img src="imagenes/mision.png"></a>
<a href="vision.html" target="marco"><img src="imagenes/vision.png"></a>
<a href="contacto.html" target="marco"><img src="imagenes/contacto.png"></a>
</div>
</td>
</tr>
<tr>
<td>
<iframe name=marco width=100%
height=500 frameborder=0 src="mision.html">
</iframe>
</td>
</tr>
<tr>
<td>
pie de página: Autor Heber Rodriguez
</td>
</tr>
</table>
</body>
</html>
_________________________________________________________________________________
APLICANDO CSS
body {
background-color:#4682B4;
}
/* este es para darle color a toda el cuerpo de la pagina*/
.table1 {
margin-top: 100px;
box-shadow: 5px 5px 15px #000;
}
/* con esta opcion el margen de la tabla de arriba*/
#menu {
height: 100px;
text-align:center;
width: 900px;
}
/*desde aqui el menu le damos un alto un ancho y alineamos el texto al centro del menu*/
#menu a {
display: inline-block;
width: 150px;
}
/*esta opcion es para colocar el menu en linea y tener una separción de 150px por cada uno*/
#menu a img {
height: 75px;
width: 75px;
}
/* con esta opcion le estoy diciendo a la imagen del menu el tamaño y ancho que tendra*/
#menu a:hover img {
height: 100px;
width: 100px;
-webkit-transition: all .3s ease-in-out;
-moz-transition: all .3s ease-in-out;
-o-transition: all .3s ease-in-out;
-ms-transition: all .3s ease-in-out;
transition: all .3s ease-in-out;
}
/* efecto al menu cuando pasamos el mouse*/
.titulo {
font-family: "Arial";
font-size: 40px;
text-align: center;
width: 100%;
}
.texto {
font-family: "Arial";
font-size: 20px;
line-height: 35px;
text-align: center;
}
.campo {
background: blue;
color: #FFF;
font-family: "Tahoma";
}
.campo:hover {
background: #f60;
box-shadow: 5px 5px 15px #000;
}
No hay comentarios:
Publicar un comentario