Duvida codificaçao

2 participantes

Wiz-Khalifa Wiz-Khalifa  • 09.11.16 20:55

Duvida codificaçao Empty Duvida codificaçao 09.11.16 20:55

Eu tou aprendendo codificar queria fazer uma pergunta se eu pegar uma imagem tipo no imgur abaixar como codifico sem as mini imagens separadas ?

Junior Junior  • 09.11.16 21:22

DesenvolvedorMembro técnico

Duvida codificaçao Empty Re: Duvida codificaçao 09.11.16 21:22

Eu acho que entendi mas ao mesmo tempo não entendi,explique um pouco mais

Wiz-Khalifa Wiz-Khalifa  • 09.11.16 21:26

Duvida codificaçao Empty Re: Duvida codificaçao 09.11.16 21:26

Tipo tou aprendendo codificar ae eu peguei umas de tuas layout desenhas que estar no imgur como codifico ela sem as partes para colocar no css ?

Junior Junior  • 09.11.16 21:47

DesenvolvedorMembro técnico

Duvida codificaçao Empty Re: Duvida codificaçao 09.11.16 21:47

Usa <div class=""></div> ou <div id=""></div> para as partes que você quer fazer exemplo rápido.

Html:

Código:

<!-- Parte do layout (corpo do layout) -->
<div class="center"> <!-- Centraliza o layout -->
<div class="right"> <!-- Lado direito -->
<div class="box"> <!-- Box -->
<div class="titulo">Titulo de uma box</div> <!-- Titulo -->
conteúdo de uma box
</div><!-- Fim da box -->
</div><!-- Fim do lado direito -->
<div class="left"> <!-- Lado esquerdo -->
<div class="box"> <!-- Box -->
<div class="titulo">Titulo de uma box</div> <!-- Titulo -->
conteúdo de uma box
</div>  <!-- Fim da box -->
</div> <!-- Fim lado esquerdo -->
</div> <!-- Fim do centro -->
<!-- Parte do layout (corpo do layout) -->

Css:

Código:

/* pode ter erros no código pois foi feito na hora */
.center{margin:auto;width:1000px;} /* centraliza o meio + tamanho do layout(largura) */
.center .left{float:left;width:700px;margin-right:5px;} /* Lado esquerdo do layout(exemplo:box das Categorias da power-pixel) */
.center .right{float:right;width:295px;} /* Lado direito (Exemplo: box últimos assuntos da ppf) */
.center .box{background:#fff;width:auto;height:auto;padding:4px;margin-bottom:5px;border-radius:3px;} /* box que é ajustada automaticamente conforme o tamanho do width do LEFT ou RIGHT */
.center .box .titulo{background:#3498DB;height:40px;width:auto;border-radius:3px;line-height:40epx;color:#FFF;text-shadow: 0 1px 2px rgba(0,0,0,.3);margin-bottom:5px;} /* Titulo que ficará dentro da box (Exemplo: pokodesigns.com/rcms/) */

EDIT: esqueci de falar da parte de imagens,como meus layouts são editaveis basta você pegar uma imagem (de um header por exemplo hospedar em algum lugar e usar o background: url('link');)

Exemplo:

Vai no FW,seleciona a imagem da CTRL+N ajusta para o tamanho da imagem e salva ela

[Tens de ter uma conta e sessão iniciada para poderes visualizar esta imagem]

se bugar clique aqui

Obs: no caso do layout do print a maioria das coisas é css,box,titulo,etc;não precisando de muitas imagens para ser feito.
Permissões neste sub-fórum
Não podes responder a tópicos

BH Servers

Recomendamos a BH Servers com proteção DDOS gratuita em Cloud Server de alta performance. Entrega imediata.