Stvaranje galerija slika sa Caption, css, tutorijali |

Stvaranje slika Galerija sa Caption

U ovaj post smo crating jednostavan galerija slika uz naslov. Postoji mnogo jednostavniji način da to učinite s popisom i neke vrlo lako CSS. Ovisno o tome što želite učiniti sa svojim foto galeriju koju svibanj ištanje to imati naziv ili više informacije dostupne na stranici.

Sada prvo smo kreiran jednostavan HTML strukture.


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

CSS Šifra
Sada Napravite jednostavan i učinkovit CSS koda. Ovdje je kod.


  ; padding : 0 ; } * (Margin: 0; padding: 0;) 
  body ( 
  normal  Arial, Helvetica, sans-serif ; font: 100%. 1 normalna Arial, Helvetica, sans-serif; 
  ) 
  (jedan 
  text-decoration: none; 
  ; color: # 333333; 
  % normal  Arial, Helvetica, sans-serif font: 82. 5% normalnih 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%; 
  ) 


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