كود HTML للقوائم المتداخلة
تقدم HTML طريقة مرنة لإنشاء قوائم متداخلة من خلال عناصر القائمة غير مرتبة وترتيبها. يمكن أن تتداخل داخل بعضها البعض لعدد غير محدود من المرات للمساعدة في تنظيم البيانات الهرمية ، مثل عناوين الفصل والعناوين الفرعية في مستند عبر الإنترنت. بمساعدة بعض شفرة CSS ، يمكن تصميم القوائم المتداخلة لتلائم الاحتياجات الخاصة ، إما عن طريق إعطاء سمات عالمية للقائمة أو باستخدام نمط مختلف لكل طبقة من العش.
أنواع القائمة
هناك نوعان من القوائم التي يمكنك استخدامها في HTML ، وهناك عنصر عنصر قائمة يحدد العناصر لكل منهما. نوع القائمة الأول هو قائمة غير مرتبة ، والتي تسمى من قبل
- قائمة البند 1
- قائمة البند 2
قائمة متداخلة
لإنشاء قائمة متداخلة ، يجب الاتصال بفترة ثانية
- أو
- العلامة مغلقة. تأكد من إغلاق القائمة المتداخلة بشكل صحيح. على سبيل المثال ، لإنشاء قائمة مرتبة متداخلة ضمن قائمة غير مرتبة ، استخدم الرمز التالي:
- قائمة البند 1
- عنصر القائمة الفرعية 1
- عنصر القائمة الفرعية 2
- عنصر القائمة الفرعية 3
- قائمة البند 2
تأكد من إغلاق كل عنصر من القائمة وكل قائمة تحتوي على رمز إغلاق ، مثل
، - قائمة البند 1
- قبل معين
معلنة CSS
إذا كنت ترغب في تخصيص مظهر القائمة المتداخلة ، فيجب عليك استخدام CSS ، والذي يشير إلى "ورقة الأنماط المتتالية". عادة ما يتم تضمين الجماليات وتحديد المواقع في CSS في ورقة أنماط منفصلة ، والتي يتم استدعاؤها من بين علامات الرأس برمز مماثل لما يلي:
يمكن أيضًا اعتبار CSS "مضمن" ، مما يعني في سمة HTML الفعلية نفسها ، على النحو التالي:
- Inline CSS الأسبقية على التعليمات البرمجية في ورقة الأنماط.
- ، استخدم التعليمات البرمجية التالية:
li li {
قيمة السمة؛
}
هذا يحدد رمز لبند القائمة طبقتين عميقة. تأكد من أن جميع سطور "attribute: value" تنتهي بفاصلة منقوطة ، وتأكد من أن الأقواس المتعرجة تحيط بالعنصر الذي تقوم بتعريفه.
في ورقة الأنماط
يجب كتابة شفرة CSS بتنسيق محدد للعمل بشكل صحيح. في ورقة الأنماط ، قم بتعريف الرمز لكل سمة في هذا التنسيق التالي:
ul {
قيمة السمة؛
}
هذا من شأنه أن يعطي التصميم لقائمة غير مرتبة. لاعطاء التصميم لمتداخلة