گروه مقاله : CSS
تاريخ انتشار : 1394/02/05 - 10:29
كد :246

ایجاد گالری تصاویر (CSS Image Gallery)

با استفاده از CSS می توانید گالری تصاویر ایجاد نمایید.
با استفاده از CSS می توانید گالری تصاویر ایجاد نمایید. به مثال زیر توجه نمایید.
 
<!DOCTYPE html>
<html>
<head>
<style>
div.img {
margin: 5px;
padding: 5px;
border: 1px solid #0000ff;
height: auto;
width: auto;
float: left;
text-align: center;
}
 
div.img img {
display: inline;
margin: 5px;
border: 1px solid #ffffff;
}
 
div.img a:hover img {
border:1px solid #0000ff;
}
 
div.desc {
text-align: center;
font-weight: normal;
width: 120px;
margin: 5px;
}
</style>
</head>
<body>
<div class="img">
 <a target="_blank" href="klematis_big.htm">
<img src="klematis_small.jpg" alt="Klematis" width="110" height="90">
 </a>
 <div class="desc">Add a description of the image here</div>
</div>
<div class="img">
 <a target="_blank" href="klematis2_big.htm">
<img src="klematis2_small.jpg" alt="Klematis" width="110" height="90">
 </a>
 <div class="desc">Add a description of the image here</div>
</div>
<div class="img">
 <a target="_blank" href="klematis3_big.htm">
<img src="klematis3_small.jpg" alt="Klematis" width="110" height="90">
 </a>
 <div class="desc">Add a description of the image here</div>
</div>
<div class="img">
 <a target="_blank" href="klematis4_big.htm">
<img src="klematis4_small.jpg" alt="Klematis" width="110" height="90">
 </a>
 <div class="desc">Add a description of the image here</div>
</div>
</body>
</html>
 
نتیجه به صورت زیر درخواهد آمد :
 
نظرات كاربران :