Skabe et billede galleri med billedtekst, CSS, tutorials |

Oprettelse af en Fotos med Caption

I denne post vi crating et enkelt billede galleri med billedtekst. Der er en langt enklere måde at gøre dette med en liste og nogle meget nemt CSS. Afhængigt af hvad du vil gøre med dit fotogalleri kan du ønsker at have en billedtekst eller flere tilgængelige oplysninger på siden.

Nu første vi oprettet en simpel HTML-struktur.


  > <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 koden
Nu skal vi oprette en simpel og effektiv CSS koden. Her er den kode.


  ; 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% normalt Arial, Helvetica, sans-serif 
  ) 
  a: hover ( 
  ; color: # FF0000; 
  ) 
  img ( 
  border: 0; 
  ) 
  h1 ( 
  ; color: # bbb; 
   Arial, Helvetica, sans-serif ; font: 195% fed Arial, Helvetica, sans-serif; 
  line-height: 100%; 
  ) 


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