Diseño Básico en HTML con CSS
Al Final Por Favor Comenten que les pareció para mantener la página, NO tienen que registrarse.
Este sencillo ejemplo posse la intención de ayudar a ubicar la manera de cómo diseñar una web muy básica utilizando CSS y HTML como herramientas. Este ejemplo se conformará de 2 archivos, uno que contendrán las etiquetas, osea el HTML y el otro el que contendrá un diseño escrito en CSS. El archivo 1 se llamará index.html y el 2do archivo se llamara estilos.css.
El archivo HTML deberá contener esto:
Código que dentro de "index.html"
<?xml version='1.0' encoding='UTF-8' ?>
<html>
<link rel="stylesheet" type="text/css" href="estilo.css" />
<head>
<title>TÍTULO</title>
</head>
<body id="color_fondo">
<div id="superior">
<h1>MI TÍTULO</h1>
</div>
<p></p>
<div id="centro">
DIV Céntro
</div>
<div id="izquierda" >
DIV Izquierda
</div>
<div id="derecha" >
DIV Derecha
</div>
<footer>
<div id="inferior" >
Pie de Página
</div>
</footer>
</body>
</html>
//ESTILO.css o <style>
#color_fondo {
background-color: cadetblue;
}
#superior {
width: 860px;
height: 70px;
margin: auto;
background: white;
border: 5px solid #E9E4E8;
border-color: forestgreen;
font-family: cursive;
text-align: center;
}
#centro {
width: 860px;
height: 560px;
margin: auto;
background: white;
border: 5px solid #E9E4E8;
border-color: darkred;
font-family: cursive;
text-align: center;
}
#inferior {
position: relative;
width: auto;
margin: auto;
background: white;
border: 5px solid #E9E4E8;
border-color: forestgreen;
font-family: fantasy;
padding: 5px 0px;
clear: both;
text-align: center;
}
#izquierda {
width: 290px;
height: 657px;
background: dodgerblue;
border: 5px solid #E9E4E8;
border-color: blue;
text-align: center;
position: absolute;
top: 8px;
left: 0;
margin: 0 0.5em;
//ESTILO BANNER
//display:scroll;
//position:fixed;
//bottom:5px;
}
#derecha {
width: 290px;
height: 657px;
background: brown;
border: 5px solid #E9E4E8;
border-color: #999900;
text-align: center;
position: absolute;
top: 8px;
right: 0;
margin: 0 0.5em;
}
//ESPERO LES SEA DE AYUDA GRACIAS POR COMENTAR :)
0 comentarios:
Publicar un comentario
Comenten para Responder sus DUDAS al INSTANTE :-)