Het maken van een image gallery met bijschrift, css, tutorials |

Het maken van een Image Gallery met Bijschrift

In dit bericht wij crating een eenvoudige afbeelding galerij met onderschrift. Er is een veel eenvoudiger manier om dit te doen met een lijst en een aantal zeer eenvoudige CSS. Afhankelijk van wat u wilt doen met uw foto galerij kunt u een bijschrift of meer beschikbare informatie op de pagina.

Nu eerste maken we een eenvoudige HTML-structuur.


  > <div class = "gallery"> 
  <ul> 
  > <img src = "bw1.jpg"  / > <p> Image Caption </p> </a> </li> <li> <a href = "#"> <img src = "bw1.jpg" /> <p> Image Caption </ p> </ a> </ li> 
  > <img src = "bw1.jpg"  / > <p> Image Caption </p> </a> </li> <li> <a href = "#"> <img src = "bw1.jpg" /> <p> Image Caption </ p> </ a> </ li> 
  > <img src = "bw1.jpg"  / > <p> Image Caption </p> </a> </li> <li> <a href = "#"> <img src = "bw1.jpg" /> <p> Image Caption </ p> </ a> </ li> 
  > <img src = "bw1.jpg"  / > <p> Image Caption </p> </a> </li> <li> <a href = "#"> <img src = "bw1.jpg" /> <p> Image Caption </ p> </ a> </ li> 
  > <img src = "bw1.jpg"  / > <p> Image Caption </p> </a> </li> <li> <a href = "#"> <img src = "bw1.jpg" /> <p> Image Caption </ p> </ a> </ li> 
  > <img src = "bw1.jpg"  / > <p> Image Caption </p> </a> </li> <li> <a href = "#"> <img src = "bw1.jpg" /> <p> Image Caption </ p> </ a> </ li> 
  </ ul> 
  </ div>

CSS-code
Nu maken we eenvoudig en effectief CSS code. Hier is de code.


  ; padding : 0 ; } * (Margin: 0; padding: 0;) 
  body ( 
  normal  Arial, Helvetica, sans-serif ; font: 100%. 1 normale Arial, Helvetica, sans-serif; 
  ) 
  a ( 
  text-decoration: none; 
  ; color: # 333333; 
  % normal  Arial, Helvetica, sans-serif font: 82. 5% normaal Arial, Helvetica, sans-serif 
  ) 
  a: hover ( 
  ; color: # FF0000; 
  ) 
  img ( 
  border: 0; 
  ) 
  h1 ( 
  ; color: # bbb; 
   Arial, Helvetica, sans-serif ; font: bold 195% Arial, Helvetica, sans-serif; 
  line-height: 100%; 
  ) 


  . galerij ( 
  width: 600px; 
  ; margin: 0 auto;  
  ) 
   ul p { . galerij ul,. galerij ul (p 
  margin: 0; 
  padding: 0; 
  list-style-type: none; 
  ) 
  . galerij ul li ( 
  display: inline; 
  )  
  . galerij ul li a ( 
  display: block; 
  margin: 5px; 
  float: links; 
  padding: 5px; 
  width: 150px; 
  #ccc ; border: 1px vaste # CCC; 
  ) 
  . galerij ul (p 
  text-align: center; 
  2px 0 ; padding: 2px 0 2px 0; 
  )