Staffer Group BR™

Fórum interativo totalmente gratuito!


 VisualizaçõesPermissão deste fórum:
Não podes responder a tópicos


CurtirDiretório deste fórum:
Fóruns » Principal » • » Tutoriais » Tutoriais sobre programação

#1
 D'Leandro™

D'Leandro™
Fundador

Mosaico de imagens em HTML


Blog Site
Esta aplicação é suportada apenas em páginas com suporte a HTML.

--> Código HTML <--
Código:
<!DOCTYPE html>
<html>
<head>
<style>
div.img
{
  margin: 2px;
  border: 1px solid #87CEEB;
  border-radius: 6px !important;
  height: auto;
  width: auto;
  float: left;
  text-align: center;
}   
div.img img
{
  display: inline;
  margin: 3px;
  border: 0px solid #FF0000;
}
div.img a:hover img {border: 1px solid #E0FFFF;}
div.desc
{
  text-align: center;
  font-weight: normal;
  width: 120px;
  margin: 2px;
}
</style>
</head>
<body>

<div class="img">
 <a target="_blank" href="http://i41.servimg.com/u/f41/17/71/75/73/banner11.png"><img src="http://i41.servimg.com/u/f41/17/71/75/73/banner11.png" alt="Klematis" width="110" height="90"></a>
 <div class="desc">Adicione a descrição aqui.</div>
</div>
<div class="img">
 <a target="_blank" href="http://i41.servimg.com/u/f41/17/71/75/73/banner11.png"><img src="http://i41.servimg.com/u/f41/17/71/75/73/banner11.png" alt="Klematis" width="110" height="90"></a>
 <div class="desc">Adicione a descrição aqui.</div>
</div>
<div class="img">
 <a target="_blank" href="http://i41.servimg.com/u/f41/17/71/75/73/banner11.png"><img src="http://i41.servimg.com/u/f41/17/71/75/73/banner11.png" alt="Klematis" width="110" height="90"></a>
 <div class="desc">Adicione a descrição aqui.</div>
</div>
<div class="img">
 <a target="_blank" href="http://i41.servimg.com/u/f41/17/71/75/73/banner11.png"><img src="http://i41.servimg.com/u/f41/17/71/75/73/banner11.png" alt="Klematis" width="110" height="90"></a>
 <div class="desc">Adicione a descrição aqui.</div>
</div>

</body>
</html>

--> Visualização Final <--

Demonstração


Desenvolvido por D'Leandro™ | SGBR™
Editado e Postado por 2012 © Staffer Group BR™

#2
 Narutofake

Narutofake
Membro
Olá não consigo visualizar o efeito '-'

#3
 D'Leandro™

D'Leandro™
Fundador
O Efeito organiza imagens horizontalmente, com uma pequena descrição!
Veja na imagem: https://i.servimg.com/u/f15/17/71/75/73/sem_t202.png

#4
 Conteúdo patrocinado