Ebben a POST crating egyszerű képgaléria a felirat. Van egy sokkal egyszerűbb módja annak, hogy ezt a listát, és néhány nagyon egyszerű CSS. Attól függően, hogy mit akarsz csinálni a saját fotógaléria akkor a felirat vagy több a rendelkezésre álló információk az oldalon.

Most elõször létrehozva egy egyszerű HTML struktúrát.

 > <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> Képaláírás </ p> </ a> </ li> <li> <a href = "#"> <img src = "bw1.jpg" /> <p> Képaláírás </ p> </ a> </ li> <li> <a href = "#"> <img src = "bw1.jpg" /> <p> Képaláírás </ p> </ a> </ li> <li> <a href = "#"> <img src = "bw1.jpg" /> <p> Képaláírás </ p> </ a> </ li> <li> <a href = "#"> <img src = "bw1.jpg" /> <p> Képaláírás </ p> </ a> </ li> <li> <a href = "#"> <img src = "bw1.jpg" /> <p> Képaláírás </ p> </ a> </ li> </ ul> < / div> 

CSS kód
Most egyszerű és hatékony CSS kódot. Itt van a kód.

 ; 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 normál Arial, Helvetica, sans-serif;) a (text-decoration: none; color: # 333333; font: 82. 5% normál Arial , Helvetica, sans-serif) a: hover (color: # FF0000;) img (border: 0;) h1 (color: # bbb; font: 195% félkövér 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 ; } . galéria (width: 600px; margin: 0 auto;). gallery ul,. gallery ul p (margin: 0; padding: 0; list-style-type: none;). gallery ul li (display: inline;). galéria 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 ;) 

végül mi történt. Mi létrehoztunk egy képgaléria a felirat. Css-kép-a-gallery-caption

Kategória: css, oktatóanyagok, Webfejlesztés admin