ওয়েব স্কুল বিডি : সুপ্রিয় শিক্ষার্থী বন্ধুরা, শুভেচ্ছা নিয়ো। আমরা গত পর্বে লিস্ট (List) নিয়ে আলোচনা করেছিলাম। আজ তোমাদের লিস্টে ইমেজের ব্যবহার নিয়ে আলোচনা করা হলো :
লিস্টে ইমেজের ব্যবহার :
লিস্টে ইমেজের ব্যবহার :
লিস্টে যেকোন সিম্বলের পরিবর্তে ছোট আকারের ইমেজ ব্যবহার করা যায়।নেভিগেশন বারে লিস্টের ব্যবহার খুবই জনপ্রিয়। সাধারণত সাইডবার নেভিগেশনে ব্যবহৃত লিস্টে লিস্ট স্টাইল হিসেবে ইমেজের ব্যবহার বেশি দেখা যায়।লিস্ট স্টাইল হিসেবে ইমেজ ব্যবহারের জন্য Declaration করতে হবে list-style-image:url(images/b.png)।
অনুশীলন প্রজেক্ট :
<html>
<head>
<title> www.webschoolbd.com</title>
<style>
body{background:#c9f3fa; margin-left:120px;}
h1{color:#F00;}
ul{list-style-image:url(images/b.png)}
</style>
</head>
<body >
<h1>List Style Image</h1>
<ul id="disc">
<li><a href="www.webschoolbd.com">Home</a></li>
<li><a href="www.webschoolbd.com">About Us</a></li>
<li><a href="www.webschoolbd.com">HTML</a></li>
<li><a href="www.webschoolbd.com">CSS</a></li>
<li><a href="www.webschoolbd.com">PHP</a></li>
<li><a href="www.webschoolbd.com">Contact Us</a></li>
</ul> </body>
</html>
<head>
<title> www.webschoolbd.com</title>
<style>
body{background:#c9f3fa; margin-left:120px;}
h1{color:#F00;}
ul{list-style-image:url(images/b.png)}
</style>
</head>
<body >
<h1>List Style Image</h1>
<ul id="disc">
<li><a href="www.webschoolbd.com">Home</a></li>
<li><a href="www.webschoolbd.com">About Us</a></li>
<li><a href="www.webschoolbd.com">HTML</a></li>
<li><a href="www.webschoolbd.com">CSS</a></li>
<li><a href="www.webschoolbd.com">PHP</a></li>
<li><a href="www.webschoolbd.com">Contact Us</a></li>
</ul> </body>
</html>
কার্যপ্রণালী :
images নামে নতুন একটা folder তৈরি করতে হবে। images folder এর মধ্যে যে ইমেজটি লিস্টে প্রদর্শন করা হবে তা রাখতে হবে।এই প্রজেক্টটিতে b.png নামে একটা ইমেজ ব্যবহার করা হয়েছে।
Tags
CSS