Mattziin 22 Postado Janeiro 11, 2013 Share Postado Janeiro 11, 2013 (editado) 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 Editado Janeiro 11, 2013 por Mattziin (veja o histórico de edições) Tio Marshmello reagiu a isso 1 Citar AJUDEI ? ---- CUSTA NADA DAR UM REP NÉ ? ------ Vivendo e aprendendo, errando e se fudendo. Link para o post Compartilhar em outros sites
.png.020ba42dce1a4aa16afd44c8368fd85d.png)
Posts Recomendados
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.