TechBlogSD - ওয়ার্ডপ্রেস এবং ওয়েব ডেভেলপমেন্টের জন্য সবকিছু
ওয়েব এবং ওয়ার্ডপ্রেস নির্দেশাবলী, খবর, থিম এবং প্লাগইনগুলির পর্যালোচনা

কিভাবে Weebly এ বুলেটযুক্ত তালিকা আইটেম তৈরি করবেন?

3

ট্যাগ. অনিয়ন্ত্রিত তালিকাগুলি তালিকা শৈলী হিসাবে ডিস্ক ব্যবহার করে এবং আদেশকৃত তালিকা গুলিগুলির জন্য দশমিক শৈলী ব্যবহার করে। Weebly এ এই ডিফল্ট মানগুলি পরিবর্তন করার আর কোন বিকল্প নেই যদি না আপনি এটিকে প্রধান স্টাইলশীটে পরিবর্তন করেন।

CSS- এ ডিফল্ট লিস্ট স্টাইল পরিবর্তন করা

যদি আপনি ডিফল্ট তালিকার শৈলী পরিবর্তন করতে চান তাহলে নিচের কোডটি আপনার "main.less" (পুরনো থিমগুলিতে) ফাইলে যুক্ত করুন।

div.paragraph ul, div.paragraph ul li { list-style: circle outside !important; } div.paragraph ol, div.paragraph ol li { list-style: lower-alpha outside !important; }

তালিকা বুলেটের জন্য ফন্ট অসাধারণ আইকন ব্যবহার করা

যদিও প্রধান স্টাইলশীট পরিবর্তন করা সহজ, এটি একটি নির্দিষ্ট বুলেট টাইপের ব্যবহার সীমাবদ্ধ করে। সহজ এবং প্রস্তাবিত বিকল্প হ’ল তালিকায় বুলেট হিসাবে ফন্ট দুর্দান্ত আইকন (বা অন্য কোনও আইকন) ব্যবহার করা। এটি আপনার তালিকায় সীমাহীন ধরণের আইকন যুক্ত করার সুযোগ দেয়। তাছাড়া আপনি একই অনিয়ন্ত্রিত বা অর্ডারকৃত তালিকা আইটেমের জন্য বিভিন্ন বুলেট আইকন ব্যবহার করতে পারেন।

কিভাবে Weebly এ বুলেটযুক্ত তালিকা আইটেম তৈরি করবেন?

ফন্ট অসাধারণ আইকনগুলি তালিকা হিসাবে ব্যবহার করার জন্য আপনার Weebly পৃষ্ঠার "হেডার কোড" বিভাগের অধীনে নিচের কোডটি যোগ করুন:

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css"> <style> .fa-ul { line-height: 28px; font-size: 22px; } </style>

লাইনের উচ্চতা এবং ফন্টের আকারের বৈশিষ্ট্যগুলি আইকন এবং পাঠ্য সঠিকভাবে একত্রিত হয়েছে তা নিশ্চিত করতে ব্যবহৃত হয়। নীচে এইচটিএমএল বিষয়বস্তু একটি "এম্বেড কোড" এলিমেন্টের ভিতরে যোগ করা হবে।

<ul class="fa-ul"> <li><i class="fa-li fa fa-check-square"></i>Check Square</li> <li><i class="fa-li fa fa-book"></i>Book</li> <li><i class="fa-li fa fa-bullhorn"></i>Announcement</li> <li><i class="fa-li fa fa-gear"></i>Settings</li> <li><i class="fa-li fa fa-home"></i>Home</li> <li><i class="fa-li fa fa-phone-square"></i>Phone</li> </ul>

এখানে আপনার রেফারেন্সের জন্য ফন্ট অসাধারণ আইকন তালিকা, আপনি যেটি ব্যবহার করতে চান তা বেছে নিন এবং হাইলাইট করা আইকন ক্লাসটি আপনার নিজের সাথে প্রতিস্থাপন করুন। উদাহরণস্বরূপ, বইয়ের আইকনকে হোম আইকন দিয়ে প্রতিস্থাপিত করার জন্য "এফএ-বুক" কে "এফএ-হোম" দিয়ে প্রতিস্থাপন করুন।

<li><i class="fa-li fa fa-book"></i>Book</li>

এছাড়াও আপনার নিজের সঙ্গে পাঠ্য প্রতিস্থাপন করুন।

ইমেজ বুলেট সহ CSS তালিকা

আপনি তালিকা আইটেমগুলির জন্য বুলেট হিসাবে একটি চিত্র সংজ্ঞায়িত করতে CSS ব্যবহার করতে পারেন।

কিভাবে Weebly এ বুলেটযুক্ত তালিকা আইটেম তৈরি করবেন?

প্রথমে বুলেট হিসেবে ব্যবহার করার জন্য ছবিটি বেছে নিন এবং আপনার Weebly সাইটে আপলোড করুন। তারপরে আপনার পৃষ্ঠার "হেডার কোড" বিভাগের অধীনে নীচের কোডটি যুক্ত করুন:

<style> .bul { list-style-image: url("/files/theme/Hand.png"); font-size: 24px; line-height: 32px; margin-left: 36px; } </style>

এখানে "Hand.png" হল বুলেটের জন্য ব্যবহৃত ইমেজ এবং অবশিষ্ট স্টাইলগুলি বুলেট ইমেজের সাথে বিষয়বস্তুর সমন্বয় নিশ্চিত করা। নীচের এইচটিএমএল কোড যোগ করুন এবং বুলেটের কার্যকারিতা দেখতে সাইটটি প্রকাশ করুন।

<ul class="bul"> <li>JavaScript</li> <li>CSS</li> <li>PHP</li> </ul>

বিভিন্ন বুলেটের ধরন সহ CSS তালিকা

আপনি অনিয়ন্ত্রিত এবং অর্ডারকৃত তালিকার জন্য বিভিন্ন ধরনের বুলেট তৈরি করতে CSS ব্যবহার করতে পারেন।

কিভাবে Weebly এ বুলেটযুক্ত তালিকা আইটেম তৈরি করবেন?

আপনার Weebly পৃষ্ঠার "হেডার কোড" বিভাগের অধীনে নীচের CSS কোড যোগ করুন।

<style> .css-list1 { list-style-type: circle; } .css-list2 { list-style-type: disc; } .css-list3 { list-style-type: upper-roman; } .css-list4 { list-style-type: lower-alpha; } .common { margin-left: 36px; font-size: 24px; line-height: 32px; } </style>

এই উদাহরণে, আমরা চারটি ভিন্ন বুলেট শৈলী তৈরি করি – দুটি অননুমোদিত এবং দুটি অর্ডারকৃত তালিকার জন্য "সাধারণ" শ্রেণীর গুণাবলী সহ মার্জিন, ফন্ট সাইজ এবং লাইনের উচ্চতা বিষয়বস্তুর সারিবদ্ধতা নিশ্চিত করার জন্য। বিভিন্ন বুলেট স্টাইলের তালিকা তৈরি করতে " এম্বেড কোড " উপাদান ব্যবহার করে নিচের HTML কোডটি যোগ করুন ।

<!-- Unordered List with circle --> <ul class="css-list1 common"> <li>WordPress Development</li> <li>Weebly Development</li> <li>Joomla Development</li> </ul> <!-- Unordered List with disc --> <ul class="css-list2 common"> <li>Blog - Latest Updates</li> <li>Forum - Post Your Opinion</li> <li>Email - Contact Us</li> </ul> <!-- Ordered List with upper-roman --> <ol class="css-list3 common"> <li>Free Email Support</li> <li>Free Domain Registration</li> <li>Free Hosting</li> </ol> <!-- Ordered List with lower-alpha --> <ol class="css-list4 common"> <li>Google</li> <li>Apple</li> <li>Microsoft</li> </ol>

দ্রষ্টব্য: সিএসএস "তালিকা-শৈলী-প্রকার" সম্পত্তি অর্ডারকৃত এবং অনিয়ন্ত্রিত উভয় তালিকার জন্য বুলেট শৈলী নির্ধারণ করতে ব্যবহার করা যেতে পারে।

তালিকা শৈলী প্রকারের মান

CSS- এ তালিকা-শৈলী-টাইপের জন্য আপনি যে মানগুলি প্রদান করতে পারেন তার একটি তালিকা নিচে দেওয়া হল।

আর্মেনিয়ান হীরাগানা নিম্ন-ল্যাটিন
বৃত্ত হীরাগানা-ইরোহা নিম্ন-রোমান
cjk-ideographic উত্তরাধিকার কোন
দশমিক প্রাথমিক বর্গক্ষেত্র
দশমিক-নেতৃস্থানীয়-শূন্য বলুন উচ্চ-আলফা
ডিস্ক কাতাকানা-ইরোহা উচ্চ-ল্যাটিন
জর্জিয়ান নিম্ন-আলফা উচ্চ-রোমান
হিব্রু নিম্ন-গ্রীক

রেকর্ডিং উত্স: webnots.com
Leave A Reply

এই ওয়েবসাইট আপনার অভিজ্ঞতা উন্নত করতে কুকি ব্যবহার করে। আমরা ধরে নেব যে আপনি এটির সাথে ঠিক আছেন, তবে আপনি ইচ্ছা করলে অপ্ট-আউট করতে পারেন। আমি স্বীকার করছি আরো বিস্তারিত