Simples CSS Framework

01/09/2010 19:49

 Que tal uns exemplos de simples CSS Framework, uma mão na roda para desenvolvedores e designers, deixando o CSS o mais fácil possível.

 

Modelo HTML CSS

<link href='seu.css' rel='stylesheet' type='text/css' />

<div class=t_holder>

<div class=t_header> </div>

<div class=t_1 ></div>

<div  class=t_2 ></div>

<div  class=t_3 ></div>

<div  class=t_4 ></div>

<div  class=t_5 ></div>

</div>

 
 
 

.mainbody{ margin-left: auto;margin-right: auto; width:960px}

.t_1{ width:33.3%; background-color:Green; height:400px; float:left;}

.t_2{ width:33.3%; background-color:Blue; float:left; height:400px; }

.t_3{ width:33.3%; background-color:Red; float:left; height:400px; }

.t_header{ background-color:Yellow; width:100%; height:100px;}




 

<link href='seu.css' rel='stylesheet' type='text/css' />

<div class=t_holder>

<div class=t_header> </div>

<div class=t_1 ></div>

<div  class=t_2 ></div>

<div  class=t_3 ></div>

<div  class=t_4 ></div>

<div  class=t_5 ></div>

</div>

.mainbody{ margin-left: auto;margin-right: auto; width:960px}

/* seu css 2 */

.t_1{ width:30%; background-color:Red; height:400px; float:left;}

.t_2{ width:70%; background-color:Blue; float:left; height:400px; }

.t_header{ background-color:Yellow; width:100%; height:100px;}

 

 <link href='seu3.css' rel='stylesheet' type='text/css' />

<div class=t_holder>

<div class=t_header> </div>

<div class=t_1 ></div>

<div  class=t_2 ></div>

<div  class=t_3 ></div>

<div  class=t_4 ></div>

<div  class=t_5 ></div>

</div>

.mainbody{ margin-left: auto;margin-right: auto; width:960px}

 

/* seu css 3 */

.t_1{ width:100%; background-color:Red; height:400px; float:left;}

.t_2{ width:100%; background-color:Blue; float:left; height:100px; }

.t_header{ background-color:Yellow; width:100%; height:100px;}


Alguem reparou ?

Pois é, utilizei o mesmo HTML para todos, o que fez o Layout do Framework foi o santo CSS.