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

0
362

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

দেখুন…………

Unlimited Web Hosting
Unlimited Web Hosting
Unlimited Web Hosting
Unlimited Web Hosting

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

<!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 আলাদা করে সেভ দিয়ে দেখবেন আপনার পছন্দের গ্যালারী।

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

 
টিউনারপেজের নতুন টিউন আপনাকে ইমেইল করব?
Unlimited Web Hosting
Unlimited Web Hosting
Unlimited Web Hosting
Unlimited Web Hosting

একটি উত্তর ত্যাগ

Please enter your comment!
Please enter your name here

five × five =