সি এস এস ব্যাবহার করে তৈরি করুন আপনার পছন্দের গ্যালারী

সি এস এস ব্যাবহার করে তৈরি করুন আপনার পছন্দের গ্যালারী

আজ আপনাদের একটা এ্যালবাম বা ফটো গ্যালারী কিভাবে (সি এস এস) ব্যাবহার করা যায় টা দেখাব।

দেখুন…………

Untitled

<!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>

আপনি যখন কাজটি করবেন তখন html / css path আলাদা করে সেভ দিয়ে দেখবেন আপনার পছন্দের গ্যালারী।

কেমন লাগল জানাতে ভুলবেন না কিন্তু।

About fsmoynul