كود HTML للقوائم المتداخلة

تقدم HTML طريقة مرنة لإنشاء قوائم متداخلة من خلال عناصر القائمة غير مرتبة وترتيبها. يمكن أن تتداخل داخل بعضها البعض لعدد غير محدود من المرات للمساعدة في تنظيم البيانات الهرمية ، مثل عناوين الفصل والعناوين الفرعية في مستند عبر الإنترنت. بمساعدة بعض شفرة CSS ، يمكن تصميم القوائم المتداخلة لتلائم الاحتياجات الخاصة ، إما عن طريق إعطاء سمات عالمية للقائمة أو باستخدام نمط مختلف لكل طبقة من العش.

أنواع القائمة

هناك نوعان من القوائم التي يمكنك استخدامها في HTML ، وهناك عنصر عنصر قائمة يحدد العناصر لكل منهما. نوع القائمة الأول هو قائمة غير مرتبة ، والتي تسمى من قبل

    العلامات. هذا يعطي قائمة نقطية - على الرغم من أنه يمكنك إزالة الرموز النقطية داخل CSS عن طريق تعيين نوع نمط القائمة إلى "بلا". والثاني هو قائمة مرتبة ، ودعا مع
      ، والتي ترجع قائمة ذات تعداد رقمي. بين علامتي الفتح والإغلاق ، يمكنك تحديد كل عنصر قائمة. فمثلا:

      • قائمة البند 1
      • قائمة البند 2

      قائمة متداخلة

      لإنشاء قائمة متداخلة ، يجب الاتصال بفترة ثانية

        أو
          قبل معين
        1. العلامة مغلقة. تأكد من إغلاق القائمة المتداخلة بشكل صحيح. على سبيل المثال ، لإنشاء قائمة مرتبة متداخلة ضمن قائمة غير مرتبة ، استخدم الرمز التالي:

          • قائمة البند 1
            1. عنصر القائمة الفرعية 1
            2. عنصر القائمة الفرعية 2
            3. عنصر القائمة الفرعية 3
          • قائمة البند 2

          تأكد من إغلاق كل عنصر من القائمة وكل قائمة تحتوي على رمز إغلاق ، مثل

        2. ،
      و .

      معلنة CSS

      إذا كنت ترغب في تخصيص مظهر القائمة المتداخلة ، فيجب عليك استخدام CSS ، والذي يشير إلى "ورقة الأنماط المتتالية". عادة ما يتم تضمين الجماليات وتحديد المواقع في CSS في ورقة أنماط منفصلة ، والتي يتم استدعاؤها من بين علامات الرأس برمز مماثل لما يلي:

      يمكن أيضًا اعتبار CSS "مضمن" ، مما يعني في سمة HTML الفعلية نفسها ، على النحو التالي:

        Inline CSS الأسبقية على التعليمات البرمجية في ورقة الأنماط.

        في ورقة الأنماط

        يجب كتابة شفرة CSS بتنسيق محدد للعمل بشكل صحيح. في ورقة الأنماط ، قم بتعريف الرمز لكل سمة في هذا التنسيق التالي:

        ul {

        قيمة السمة؛

        }

        هذا من شأنه أن يعطي التصميم لقائمة غير مرتبة. لاعطاء التصميم لمتداخلة

      • ، استخدم التعليمات البرمجية التالية:

        li li {

        قيمة السمة؛

        }

        هذا يحدد رمز لبند القائمة طبقتين عميقة. تأكد من أن جميع سطور "attribute: value" تنتهي بفاصلة منقوطة ، وتأكد من أن الأقواس المتعرجة تحيط بالعنصر الذي تقوم بتعريفه.

      موصى به