Hoja de estilo css

Publicado: 1 marzo, 2012 de Alex Noyola en Zoom Ok

A continuación se presenta el código básico de nuestra hoja de etilo, la cual puede estar posicionada en el HEAD de nuestro código HTML, o bien puede ser un archivo .CSS, el cual debe mandarse a llamar desde el código HTML.

CODIGO CSS:

 
#filiblux{
width:950px;
height:1000px;
background-color:#ccffcc;
}
#logo{
width:150px;
height:150px;
background-color:#ffcc00;
float:left;
}

#banner{
width:800px;
height:150px;
background-color:#4450ee;
float:right;
}

.clear{
clear:both
}

#menu{
width:150px;
height:800px;
background-color:#fa3c00;
float:left;
}

#cont{
width:800px;
height:800px;
background-color:purple;

float:left;
}

NOTA: modificar con datos diferentes, los números hexadecimales de los colores.

 

Ahora se presenta el código HTML:

 

<html>
<head>
<title> titulo de la pagina </title>
<link href=”nombre_de_la_hoja_de_estilo.css” rel=”stylesheet” type=”text/css” >
<!– aki manda a llamar a la hora de estilo que creamos–>
</head>
<body>

<div id=”filiblux”>
<div>
<div id=”logo”>logo</div>
<div id=”banner”>banner</div>
<div class=”clear”></div>
<div>

<div>
<div id=”menu”>menu</div>
<div id=”cont”>contenido</div>
<div class=”clear”></div>
<div>

<div id=”peon”> solo<div>
</div>

</body>
</html>

 

RESULTADO:

si tienes dudas…. comenta y las resolveremos

 

 

 

Anuncios

Responder

Introduce tus datos o haz clic en un icono para iniciar sesión:

Logo de WordPress.com

Estás comentando usando tu cuenta de WordPress.com. Cerrar sesión / Cambiar )

Imagen de Twitter

Estás comentando usando tu cuenta de Twitter. Cerrar sesión / Cambiar )

Foto de Facebook

Estás comentando usando tu cuenta de Facebook. Cerrar sesión / Cambiar )

Google+ photo

Estás comentando usando tu cuenta de Google+. Cerrar sesión / Cambiar )

Conectando a %s