Trong bài đăng này, chúng tôi crating một phòng trưng bày hình ảnh đơn giản với chú thích. Có một đơn giản hơn nhiều cách để làm điều này với một danh sách và một số rất dễ CSS. Tùy thuộc vào những gì bạn muốn làm với các phòng trưng bày ảnh của bạn có thể bạn muốn có một chú thích hoặc nhiều hơn thông tin có sẵn trên trang.

Bây giờ đầu tiên chúng tôi tạo một cấu trúc đơn giản, mã HTML.

 > <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 "gallery" lớp => <ul> <li> <a href = "#"> <img src = "bw1.jpg" /> <p> Chú thích Hình ảnh </ p> </ a> </ li> <li> <a href = "#"> <img src = "bw1.jpg" /> <p> Chú thích Hình ảnh </ p> </ a> </ li> <li> <a href = "#"> <img src = "bw1.jpg" /> <p> Chú thích Hình ảnh </ p> </ a> </ li> <li> <a href = "#"> <img src = "bw1.jpg" /> <p> Chú thích Hình ảnh </ p> </ a> </ li> <li> <a href = "#"> <img src = "bw1.jpg" /> <p> Chú thích Hình ảnh </ p> </ a> </ li> <li> <a href = "#"> <img src = "bw1.jpg" /> <p> Chú thích Hình ảnh </ p> </ a> </ li> </ ul> < / div> 

Mã CSS
Bây giờ chúng tôi đơn giản và hiệu quả Tạo mã CSS. Đây là ma.

 ; 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 bình thường Arial, Helvetica, sans-serif;) một (text-decoration: none; color: # 333333; font chữ: 82. 5% bình thường Arial , Helvetica, sans-serif) a: hover (color: # FF0000;) img (border: 0;) h1 (color: # BBB; font: bold 195% 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 ; } . thư viện (width: 600px; margin: 0 auto;). thư viện ul,. p thư viện ul (margin: 0; padding: 0; danh sách kiểu-loại: none;). thư viện ul li (display: inline;). một thư viện ul li (display: block; margin: 5px; float: left; padding: 5px; width: 150px; border: 1px solid # ccc;). thư viện ul p (text-align: center; padding: 2px 0 2px 0 ;) 

cuối cùng, chúng tôi đã làm xong. Chúng tôi đã tạo một thư viện hình ảnh với các chú thích. Css--thư viện hình ảnh-với-chú thích