Aprenda a Cria Seu Próprio Layout

Postado Janeiro 11, 2013 12 anos

Cansado de ter um Layout igual aos outros ?

então faça seus próprios Layouts, Hj vou ensinar como fazer um Layout Do ZERO.

Vamos lá, Vou postar uns Códigos aqui e vcs Irão Analisar minunciosamente.

Primeiro Exemplo:

Arquivo CSS

body {

background-image: url("bg_pg.gif");

}

#banner-principal {

height:252px;

width: 800px;

border: 3px dashed 3696A65;

background: #20D05E

margin-top: 0px;

margin-right: 1px;

margin-bottom: 0px;

margin-left: 0px;

}

#menu-esquerda {

float:left;

height: 500px;

widht: 200px;

background: #089443;

padding:5px;

margin-top:0px;

margin-right:0px;

margin-bottom:0px;

margin-left:0px;

color: #ffffff;

font-size: 10pt;

font-family: verdana, arial, helvetica, sans-serif;

text-align: left;

}

#area-principal {

float: none;

height: 500px;

width:598px;

background: #EFF3CE;

padding: 5px;

margin-top:0px;

margin-right:0px;

margin-bottom:0px;

margin-left:0px;

}

#menusize {

height: 50px;

width: 800px;

border: 3px groove #696A65;

background: #000000;

padding: 5px;

margin-top:2px;

margin-right:0px;

margin-bottom:6px;

margin-left:0px;

color: #ffffff;

font-size: 8pt;

font-family: verdana, arial, helvetica, sans-serif;

text-align: center;

}

Arquivo HTML

<html>

<head>

<title> Layout

</title>

<link rel="stylesheet" type="text/css" href="arquivo_css_tibiaking">

</head>

<body>

<DIV ID="banner-principal">

<p> Banner aqui </p>

</DIV>

<DIV ID="menu-esquerda">

<ul>

<li> <a href="pagina01.html"> Link 01 </a></li>

<li> <a href="pagina02.html"> Link 02 </a></li>

<li> <a href="pagina03.html"> Link 03 </a></li>

<li> <a href="pagina04.html"> Link 04 </a></li>

</ul>

</DIV>

<DIV ID="area-principal">

<p> Conteúdo aqui </p>

</DIV>

<DIV ID="menusize">

<p> Dados do site/desenvolvedor aqui </p>

</DIV>

</body>

</html>