منصة بياني التعليمية

تدريب القوائم المرتّبة — مثال لكل جزئية

الصق الصفحة كما هي في تدوينة (HTML). كل مثال مستقل.

مثال 1 — قائمة أرقام افتراضية (HTML: <ol> + <li>)

1. البند الأول
2. البند الثاني
3. البند الثالث

مثال 2 — type="A" (أحرف إنجليزية كبيرة)

1. عُنصر
2. عُنصر
3. عُنصر

مثال 3 — type="a" (أحرف إنجليزية صغيرة)

1. عُنصر
2. عُنصر
3. عُنصر

مثال 4 — type="I" (أرقام رومانية كبيرة)

1. عنصر
2. عنصر
3. عنصر

مثال 5 — type="i" (أرقام رومانية صغيرة)

1. عنصر
2. عنصر
3. عنصر

مثال 6 — start="5" (ابدأ من 5)

5. هذا الخامس
6. الثاني بعده
7. الثالث بعده

مثال 7 — reversed (ترقيم عكسي)

1. الأخير
2. قبل الأخير
3. قبل قبله

مثال 8 — value على <li> (تغيير رقم عنصر محدد)

10. هذا رقمه 10
11. يليه 11
12. ثم 12

مثال 9 — list-style-position: inside

1. الرقم يصير داخل نفس السطر
2. سطر طويل للتجربة حتى تلاحظ الالتفاف

مثال 10 — list-style-position: outside

1. الرقم خارج النص (الافتراضي)
2. تنسيق تقليدي واضح

مثال 11 — ::marker (تلوين/تكبير رقم التعداد)

1. رقم عريض وملوّن
2. تأثير واضح على العلامة فقط

مثال 12 — رقم مخصص عبر CSS counters

1. بادج رقمية بشكل مخصص
2. بدون استخدام ::marker
3. تحكم كامل بالشكل

مثال 13 — أرقام داخل دوائر (Badge)

1. نقطة أولى
2. نقطة ثانية
3. نقطة ثالثة

مثال 14 — خطوات عمودية (تايملاين بسيط)

1. ابدأ
2. منتصف العمل
3. إتمام

مثال 15 — مستويات متداخلة (روماني ثم حروف)

1. قسم أول
   1. تفصيل أ
   2. تفصيل ب
2. قسم ثان
   1. تفصيل أ
   2. تفصيل ب

مثال 16 — فواصل منقطة بين العناصر

1. عنصر بفاصل سفلي
2. عنصر بفاصل سفلي
3. عنصر أخير بدون فاصل

مثال 17 — عمودان تلقائيًا (على الشاشات الأوسع)

1. 1
2. 2
3. 3
4. 4
5. 5
6. 6
7. 7
8. 8
9. 9
10. 10
11. 11
12. 12

على الجوال تبقى عمود واحد، على العرض الواسع تصير عمودين.

مثال 18 — تمرير أفقي للبنود الطويلة

1. فقرة طويلة/بطاقة 1 للتجربة
2. فقرة طويلة/بطاقة 2 للتجربة
3. فقرة طويلة/بطاقة 3 للتجربة
4. فقرة طويلة/بطاقة 4 للتجربة

اسحب يمين/يسار لعرض البقية.