Skapa ett bildgalleri med bildtext, css, handledning |

Skapa ett bildgalleri med Caption

I det här inlägget vi crating ett enkelt bildgalleri med bildtext. Det finns ett mycket enklare sätt att göra detta med en lista och några mycket enkla CSS. Beroende på vad du vill göra med ditt fotoalbum kan du ha en bildtext eller mer information som finns på sidan.

Nu första vi skapa en enkel HTML-struktur.


 > <ul> <li> <a href = "#" > <img src = "bw1.jpg" / > <p> Image Caption </p> </a> </li> <li> <a href = "#" > <img src = "bw1.jpg" / > <p> Image Caption </p> </a> </li> <li> <a href = "#" > <img src = "bw1.jpg" / > <p> Image Caption </p> </a> </li> <li> <a href = "#" > <img src = "bw1.jpg" / > <p> Image Caption </p> </a> </li> <li> <a href = "#" > <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> <div class = "gallery"> <ul> <li> <a href = "#"> <img src = "bw1.jpg" /> <p> Image Caption </ p> </ a> </ li> <li> <a href = "#"> <img src = "bw1.jpg" /> <p> Image Caption </ p> </ a> </ li> <li> <a href = "#"> <img src = "bw1.jpg" /> <p> Image Caption </ p> </ a> </ li> <li> <a href = "#"> <img src = "bw1.jpg" /> <p> Image Caption </ p> </ a> </ li> <li> <a href = "#"> <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 skapar vi enkelt och effektivt CSS-kod. Här är koden.


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


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