Galeria de Fotos 
Autor: Rafael Admin | Publicado: 2012-08-22T22:18:00-07:00



Galeria de Fotos&nbsp;



Html











Disponível&nbsp;código fonte &nbsp;Galeria







div class="galeria"

div class="image"

h1 style="color:#060;margin-top:100px;float:right;margin-right:100px;font-family:'Comic Sans MS',cusive;" &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;Galeria da Nossa Turminha &nbsp; &nbsp; /h1

ul class="foto"

 li

  a href="#"

   img src="Imagens/1.bmp" alt="" / &nbsp;span

   img src="Imagens/1.bmp" alt="" / &nbsp;/span

  /a

 /li

 li

  a href="#"

   img src="Imagens/1.bmp" alt="" / &nbsp;span

   img src="Imagens/1.bmp" alt="" / &nbsp;/span

  /a

 /li

 li

  a href="#"

   img src="Imagens/1.bmp" alt="" / &nbsp;span

   img src="Imagens/1.bmp" alt="" / &nbsp;/span

  /a

 /li

 li

  a href="#"

   img src="Imagens/1.bmp" alt="" / &nbsp;span

   img src="Imagens/1.bmp" alt="" / &nbsp;/span

  /a

 /li

/ul

/div

/div



Css




.galeria{

 width:610px;

 margin:0 auto;

 text-align:left;  

}

.image{width:670px; height:300px; position:relative; top:10px; float:right ;}&nbsp;

ul.foto {position:relative; list-style:none; width:160px;padding:1px;background:#0F0;margin:0;padding:0;}

.foto:after{display:block;content:".";height:0;font-size:0;visibility:hidden;clear::both;}

ul.foto li{width:75px;height:50px;float:left;border:2px solid #444;margin:1px;}

ul.foto li img{ border:none; width:75px; height:50px;}

ul.foto li span img{border:none;width:500px;height:290px; }

ul.foto a{display:block;}

ul.foto a span{display:none;}

ul.foto a:hover span{display:block;position:absolute;left:177px;top:-5px;background:#969;border:2px solid #666;}


Modelo de site&nbsp;

Html Completo






Css Completo




@charset "utf-8";

/* CSS Document */



*{ 

 border:0;

 margin:0;

 padding:o;

}

a{

 text-decoration:none;

}



#fundo{ 

 height:768px;

 width:1024px;

 margin-left:113px;

}



#topo{

 background:url(../Imagens/topo.jpg);

 width:1024px;

 height:161px;

}



#conteudo{

 background:#ecf8e2;

 width:1024px;

 height:565px;

 margin-right:242px; 

}

/*configuração para o menu do site */



#menu{

 background:url(../Imagens/barra_menu.png); 

 width:195px;

 height:521px;

 float:left;

 margin-top:10px;

 margin-right:25px;

 margin-left:18px; 

 clear:both; 

}

#menu li{

 display:block;&nbsp;

 color:#090; 

 word-spacing:15px;

 margin-top:10px;

 margin-left:-30px; 

 float:left; 

}



#menu li a{

 color:#090;

 font-family:"Comic Sans MS", cursive;

 font-size:25px; 

 width:183px;

 height:55px;

 display:block;

 text-align:center; 

 text-decoration:none; 

}



#menu li a:hover{

 background:url(../Imagens/botao.png) no-repeat;

 display:block;

 width:183px;

 height:55px;  

 color:#FFF;  

}





#banner{

 background:url(../Imagens/fundo-galeria.png);

 width:768px;

 height:323px;

 float:right;

 margin-top:10px;

 margin-right:18px;

 

}  

.galeria{

 width:610px;

 margin:0 auto;

 text-align:left;  

}

.image{width:670px; height:300px; position:relative; top:10px; float:right ;}&nbsp;

ul.foto {position:relative; list-style:none; width:160px;padding:1px;background:#0F0;margin:0;padding:0;}

.foto:after{display:block;content:".";height:0;font-size:0;visibility:hidden;clear::both;}

ul.foto li{width:75px;height:50px;float:left;border:2px solid #444;margin:1px;}

ul.foto li img{ border:none; width:75px; height:50px;}

ul.foto li span img{border:none;width:500px;height:290px; }

ul.foto a{display:block;}

ul.foto a span{display:none;}

ul.foto a:hover span{display:block;position:absolute;left:177px;top:-5px;background:#969;border:2px solid #666;}



#propaganda1{

 background:url(../Imagens/texto_propaganda.png);

 width:428px;

 height:159px;

 float:left;

 margin-left:5px;

 margin-top:30px;

 

}



#propaganda2{

 background:url(../Imagens/foto_propaganda.png);

 width:312px;

 height:160px;

 float:right;

 margin-right:22px;

 margin-top:30px;

}



#rodape{

 background:url(../Imagens/rodape.png);

 width:1024px;

 height:45px;

}