Ang paglikha ng isang imahe gallery sa caption, css, Tutorials |

Ang paglikha ng isang Image Gallery sa Caption

Sa post na ito namin crating isang simpleng imahen gallery sa caption. May marami simple na paraan upang gawin ito sa isang listahan at ilang napakadaling CSS. Depende sa kung ano ang nais mong gawin sa iyong photo gallery maaaring gusto mong magkaroon ng isang caption o higit pa impormasyon na makukuha sa pahina.

Ngayon unang namin creat isang simpleng HTML istraktura.


 > <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 Code
Ngayon namin Gumawa ng simple at epektibong CSS code. Dito ay ang code.


 ; 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;) katawan (font: 100%. 1 normal Arial, Helvetica, walang-serif;) (isang text-labor: none; color: # 333333; font: 82. 5% normal Arial , Helvetica, walang-serif) a: aligid (color: # FF0000;) (img border: 0;) h1 (color: # bbb; font: 195% bold Arial, Helvetica, walang-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;). gallery ul,. gallery ul p (margin: 0; padding: 0; listahan-style-uri: none;). gallery li ul (display: inline;). li ng isang gallery ul (display: block; margin: 5px; lamo: kaliwa; padding: 5px; width: 150px; border: 1px solid # ccc;). gallery ul p (text-align: center; padding: 2px 0 2px 0 ;)