সিএসএস টিউটোরিয়ালঃ ১৫তম পর্ব(Custom List)

This entry is part 5 of 15 in the series ওয়েব ডিজাইন
Print Friendly, PDF & Email

কাস্টম ইমেজ লিস্ট স্টাইল পেতে চান তবে সিএসএস প্রোপার্টি list-style-image:url() ব্যবহার করতে হবে। url এর পর রাউন্ড ব্রাকেট এর ভিতরে কাঙ্ক্ষিত ইমেজ এর রিসোর্স লিঙ্কটি দিতে হবে। আমি এখানে কয়েক ধরণের ইমেজ দিয়ে কাস্টম লিস্ট স্টাইল অ্যাপ্লাই করছি নিচের মতঃ

[html]

 

Welcome to RangpurSource’s CSS Class!

This is CSS Custom List Style Tutorial

Custom List Style A

  • List item A
  • List item B
  • List item C

Unordered List Style B

  • List item A
  • List item B
  • List item C

Unordered List Style C

  • List item A
  • List item B
  • List item C

 

[/html]

Note: উপরের কোড টুকুর আউটপুট ব্রাউজার এ ঠিকমতো দেখায় কিনা সেটা প্রদর্শনের জন্য উইন্ডোজের Notepad অথবা Notepad++ সফটওয়্যারটি ওপেন করে কোডটুকু হুবহু নিজের হাতে লিখুন, ভুলেই কপি-পেস্ট করবেন না। ফাইলের নাম দিন csscuslist বা আপনার পছন্দ মতো এবং Save as type নির্বাচন করুন .html। এবার Save করুন। মনে রাখতে হবে, প্রতিটি HTML ডকুমেন্ট .html ফরমেটে (Save) সংরক্ষণ করতে হবে। এবার ডাবল ক্লিক করে ব্রাউজারে ওপেন করুন। সব কিছু ঠিক থাকলে নিচের মত প্রদর্শন করবে…

CaptureCSSCusList

বুঝতে কোথাও সমস্যা হলে আমার ফেসবুক গ্রুপে, পেজে অথবা ব্লগের জিজ্ঞাসা পাতা’য় জানাতে পারেন।

Series Navigation<< HTML টিউটোরিয়াল: ষষ্ঠ পর্ব (টেবিল ট্যাগ – পার্ট ২)HTML টিউটোরিয়াল: ৭ম পর্ব (HTML List ট্যাগ) >>

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.