তালিকার আইটেমগুলির জন্য বিকল্প পটভূমি রঙ

Question 1

আমার একটি তালিকা রয়েছে এবং প্রতিটি আইটেম সংযুক্ত রয়েছে, আমি কি প্রতিটি উপায়ের জন্য পটভূমির রঙগুলি বিকল্প করতে পারি এমন কোনও উপায় আছে?

<ul>
    <li><a href="link">Link 1</a></li>
    <li><a href="link">Link 2</a></li>
    <li><a href="link">Link 3</a></li>
    <li><a href="link">Link 4</a></li>
    <li><a href="link">Link 5</a></li>
</ul>

Question 2

কিছু সুন্দর সিএসএস 3 কেমন?

li { background: green; }
li:nth-child(odd) { background: red; }

Question 3

আপনি যদি সিএসএসে খাঁটিভাবে এটি করতে চান তবে আপনার কাছে এমন একটি শ্রেণি থাকবে যা আপনি প্রতিটি বিকল্প তালিকা আইটেমকে অর্পণ করবেন। যেমন

<ul>
    <li class="alternate"><a href="link">Link 1</a></li>
    <li><a href="link">Link 2</a></li>
    <li class="alternate"><a href="link">Link 3</a></li>
    <li><a href="link">Link 4</a></li>
    <li class="alternate"><a href="link">Link 5</a></li>
</ul>

যদি আপনার তালিকাটি গতিশীলভাবে উত্পন্ন হয় তবে এই কাজটি আরও সহজ হবে।

আপনি যদি প্রতিটি সময় এই সামগ্রীটিকে ম্যানুয়ালি আপডেট করতে না চান তবে আপনি jQuery লাইব্রেরিটি ব্যবহার করতে পারেন <li>এবং আপনার তালিকার প্রতিটি আইটেমটিতে বিকল্পভাবে একটি স্টাইল প্রয়োগ করতে পারেন :

<ul id="myList">
    <li><a href="link">Link 1</a></li>
    <li><a href="link">Link 2</a></li>
    <li><a href="link">Link 3</a></li>
    <li><a href="link">Link 4</a></li>
    <li><a href="link">Link 5</a></li>
</ul>

এবং আপনার jQuery কোড:

$(document).ready(function(){
  $('#myList li:nth-child(odd)').addClass('alternate');
});

Question 4

আপনি প্রতিটি তালিকা আইটেমে বিকল্প স্টাইল ক্লাস যুক্ত করে এটি অর্জন করতে পারেন

<ul>
    <li class="odd"><a href="link">Link 1</a></li>
    <li><a href="link">Link 2</a></li>
    <li class="odd"><a href="link">Link 2</a></li>
    <li><a href="link">Link 2</a></li>
</ul>

এবং তারপরে এটি স্টাইলিং করুন

li { backgorund:white; }
li.odd { background:silver; }

আপনি এই প্রক্রিয়াটি জাভাস্ক্রিপ্টের সাথে আরও স্বয়ংক্রিয় করতে পারেন (নীচে jQuery উদাহরণ)

$(document).ready(function() {
  $('table tbody tr:odd').addClass('odd');
});

Question 5

শ্রেণীর বৈশিষ্ট্যগুলির একজোড়া যুক্ত করার চেষ্টা করুন, বিকল্প তালিকার সাথে যেমন 'এমনকি' এবং 'বিজোড়' বলুন, যেমন say

<ul>
    <li class="even"><a href="link">Link 1</a></li>
    <li class="odd"><a href="link">Link 2</a></li>
    <li class="even"><a href="link">Link 3</a></li>
    <li class="odd"><a href="link">Link 4</a></li>
    <li class="even"><a href="link">Link 5</a></li>
</ul>

এইচটিএমএল পৃষ্ঠার <স্টাইল> বিভাগে, বা কোনও লিঙ্কযুক্ত স্টাইলশিটে, আপনি আপনার পছন্দসই পটভূমির রঙগুলি উল্লেখ করে, একই ক্লাসগুলি সংজ্ঞায়িত করবেন:

li.even { background-color: red; }
li.odd { background-color: blue; }

আপনাকে আরও বেশি নমনীয়তা সরবরাহ করতে এবং টাইপিংটি কেটে দেওয়ার জন্য আপনার প্রয়োজনগুলি বিকশিত হওয়ায় আপনি কোনও টেম্পলেট লাইব্রেরিটি ব্যবহার করতে চাইতে পারেন। কেন এই সমস্ত তালিকা উপাদানগুলি হাতে টাইপ করুন?

Question 6

যেহেতু আপনি স্ট্যান্ডার্ড এইচটিএমএল ব্যবহার করছেন আপনাকে ক্লাসে সারি সারিটির জন্য পৃথক শ্রেণি নির্ধারণ করতে হবে এবং ম্যানুয়ালটি তৈরি করতে হবে।

Question 7

আপনি সারিগুলিতে বিকল্প শ্রেণীর নাম উল্লেখ করে এটি করতে পারেন। আমি ব্যবহার করতে পছন্দ করি row0এবং row1যার অর্থ আপনি যদি তালিকাটি প্রোগ্রামটিমে তৈরি করা হয় তবে আপনি সহজেই এগুলিতে যুক্ত করতে পারেন:

for ($i = 0; $i < 10; ++$i) {
    echo '<tr class="row' . ($i % 2) . '">...</tr>';
}

আর একটি উপায় জাভাস্ক্রিপ্ট ব্যবহার করা হবে। jQuery এই উদাহরণ ব্যবহার করা হচ্ছে:

$('table tr:odd').addClass('row1');

সম্পাদনা: আমি জানি না কেন আমি টেবিল সারি ব্যবহার করে উদাহরণ দিয়েছি ... এর trসাথে liএবং এর tableসাথে প্রতিস্থাপন করুন ulএবং এটি আপনার উদাহরণে প্রযোজ্য

Question 8

আপনি যদি jQuery সমাধান ব্যবহার করেন তবে এটি IE8 এ কাজ করবে :

jQuery

$(document).ready(function(){
$('#myList li:nth-child(odd)').addClass('alternate');
});

সিএসএস

.alternate {
background: black;
}

আপনি যদি সিএসএস সলিউশন ব্যবহার করেন তবে এটি IE8 এ কাজ করবে না :

li:nth-child(odd) {
    background: black;
}

Question 9

এটি ব্যাকগ্রাউন্ড কালারটি সম এবং বিজোড় লিটিতে সেট করা হয়েছে:

  li:nth-child(odd) { background: #ffffff; }
  li:nth-child(even) { background: #80808030; }

Question 10

আপনি এই ক্রমটি হার্ডকোডিং করে যেমন করতে পারেন:

li, li + li + li, li + li + li + li + li {
  background-color: black;
}

li + li, li + li + li + li {
  background-color: white;
}