Fazer um quadro de imagem com descrições
Bom, hoje vamos fazer um quadro de imagem com descrições.
Usaremos PHP e CSS para fazer isso.
Bom, primeiro vamos ao CSS para monta a estrutura do quadro de imagens.
.quadro{
padding:0;
clear:both;
width:500px;
}
.imagens{
margin:2px; /*Defin a a separacao das colunas aqui*/
/*height:100px;*/
padding:2px;
border: 1px solid #999999;
width:150px;
text-align:center;
float:left;
}
padding:0;
clear:both;
width:500px;
}
.imagens{
margin:2px; /*Defin a a separacao das colunas aqui*/
/*height:100px;*/
padding:2px;
border: 1px solid #999999;
width:150px;
text-align:center;
float:left;
}
Vamos criar uma pasta aonde vai ficar as fotos, sugiro que coloque dentro da pasta de imagens do seu site, assim como eu fiz “img/minimg/”.
Colocando isso na página vamos ao PHP
Dentro do corpo do html Body vamos criar as "div"
<body>
<div class="quadro">
<?Php
$i=1;
while ($i<= 6){
echo '<div class="imagens"><img src="img/minimg/'.$i.'.jpg" width="150" height="100" /><span>Descrição da Imagem</span></div>';
$i++;
}
?>
</div>
</body>
<div class="quadro">
<?Php
$i=1;
while ($i<= 6){
echo '<div class="imagens"><img src="img/minimg/'.$i.'.jpg" width="150" height="100" /><span>Descrição da Imagem</span></div>';
$i++;
}
?>
</div>
</body>
Observem que a função While vai faze um loop até “6” que é quantidade de fotos que vai ter no diretório “img/minimg/” dentro de onde o seu site estar
Então é isso ate mais....
Comentários
Postar um comentário