Ir para conteúdo
  • Cadastre-se

Aprenda a Cria Seu Próprio Layout


Posts Recomendados

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>

veja como vai ficar : Clique aqui

Se for postar em algum lugar Não esqueça de botar os Créditos :D

Editado por Mattziin (veja o histórico de edições)

AJUDEI ? ---- CUSTA NADA DAR UM REP NÉ ? ------ :D

Vivendo e aprendendo, errando e se fudendo.

Link para o post
Compartilhar em outros sites

Participe da conversa

Você pode postar agora e se cadastrar mais tarde. Se você tem uma conta, faça o login para postar com sua conta.

Visitante
Responder

×   Você colou conteúdo com formatação.   Remover formatação

  Apenas 75 emojis são permitidos.

×   Seu link foi automaticamente incorporado.   Mostrar como link

×   Seu conteúdo anterior foi restaurado.   Limpar o editor

×   Não é possível colar imagens diretamente. Carregar ou inserir imagens do URL.

  • Quem Está Navegando   0 membros estão online

    Nenhum usuário registrado visualizando esta página.

×
×
  • Criar Novo...

Informação Importante

Confirmação de Termo