লিস্টে যেকোন সিম্বলের পরিবর্তে ছোট আকারের ইমেজ ব্যবহার করা যায়।নেভিগেশন বারে লিস্টের ব্যবহার খুবই জনপ্রিয়। সাধারণত সাইডবার নেভিগেশনে ব্যবহৃত লিস্টে লিস্ট স্টাইল হিসেবে ইমেজের ব্যবহার বেশি দেখা যায়।লিস্ট স্টাইল হিসেবে ইমেজ ব্যবহারের জন্য Declaration করতে হবে list-style-image:url(images/b.png)।
অনুশীলন প্রজেক্ট
<html>
<head>
<title> www.tutohost.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.tutohost.com">Home</a></li>
<li><a href="www.tutohost.com">About Us</a></li>
<li><a href="www.tutohost.com">HTML</a></li>
<li><a href="www.tutohost.com">CSS</a></li>
<li><a href="www.tutohost.com">PHP</a></li>
<li><a href="www.tutohost.com">Contact Us</a></li>
</ul> </body></html>
<head>
<title> www.tutohost.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.tutohost.com">Home</a></li>
<li><a href="www.tutohost.com">About Us</a></li>
<li><a href="www.tutohost.com">HTML</a></li>
<li><a href="www.tutohost.com">CSS</a></li>
<li><a href="www.tutohost.com">PHP</a></li>
<li><a href="www.tutohost.com">Contact Us</a></li>
</ul> </body></html>
কার্যপ্রণালী
imstyle নামে একটা folder তৈরি করে তার মধ্যে images নামে নতুন একটা folder তৈরি করতে হবে। images folder এর মধ্যে যে ইমেজটি লিস্টে প্রদর্শন করা হবে তা রাখতে হবে।এই প্রজেক্টটিতে b.png নামে একটা ইমেজ ব্যবহার করা হয়েছে।এর পর imstyle নামে তৈরি folder এর মধ্যে একটা নোটপ্যাড open করে উপরের code টুকু লিখে file মেনু থেকে Save as এ ক্লিক করে File name: index.html , Save as type : All files, দিয়ে save করে index.html ফাইলটি Mozilla Firefox দিয়ে open করলে নিচে প্রদর্শিত ছবির মত দেখাবে।
0 comments: