I dette innlegget vi crating et bildegalleri med bildetekst. Det er en mye enklere måte å gjøre dette med en liste og noen svært enkel CSS. Avhengig av hva du vil gjøre med fotogalleri vil du kanskje ha en bildetekst eller mer tilgjengelig informasjon på siden.

Nå første vi opprette en enkel HTML strukturen.

 > <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
Nå lager vi enkel og effektiv CSS-koden. Her er koden.

 ; padding : 0 ; } body { font : 100 % . 1 normal Arial, Helvetica, sans-serif ; } a { text-decoration :none ; color : # 333333 ; font : 82 . 5 % normal Arial, Helvetica, sans-serif } a :hover { color : #FF0000 ; } img { border : 0 ; } h1 { color : #bbb ; font : 195 % bold Arial, Helvetica, sans-serif ; line-height : 100 %; } * (Margin: 0; padding: 0;) body (font: 100%. 1 normal Arial, Helvetica, sans-serif;) a (text-decoration: none; color: # 333333; font: 82. 5% normal Arial , Helvetica, sans-serif) a: hover (color: # FF0000;) img (border: 0;) h1 (color: # BBB; 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; list-style-type: none;). galleriet ul li (display: inline;). gallery 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 ;) 

Endelig er vi ferdig. Vi har laget et bildegalleri med bildetekst. Css-image-gallery-med-tekst