يتم استخدام العلامة ol للتنفيذ. أرقام أسطر التصميم (الأرقام) في القوائم المرتبة ol. طريقة جميلة و صحيحة

مرحبا عزيزي القراء! واليوم، استكمالاً لسلسلة المقالات تحت عنوان " أساسيات HTML"أريد أن أقدم لكم خوارزمية الإنشاء يسرد أتش تي أم ألمع مساعدة العلامات ul وli (قائمة نقطية)، ol وli (قائمة مرقمة)، dl، dt، dd (قائمة التعريفات).

الآن سأستمر في تعريفك بالأكثر استخدامًا مع علامات HTMLوالتي تستخدم لإنشاء قوائم على صفحات الموقع. إذا كان شخص ما لا يعرف ما هو هذا، فمن المؤكد أنه بعد المعلومات الواردة أدناه سوف يفهم على الفور ما نتحدث عنه، لأن هذا الشكل من تقديم المواد شائع جدًا.

قوائم HTML النقطية - علامات ul وli

سيتم تعريف القائمة ذات التعداد النقطي بواسطة العلامة ul. توجد بين علامتي الفتح والإغلاق عناصر قائمة، يجب أن يقع محتوى كل منها بدوره بين علامتي الفتح والإغلاق. اسمحوا لي أن أشير على الفور إلى أن علامة ul مقترنة (وجود علامة فتح وإغلاق)، وكذلك على مستوى الكتلة، أي أنها تشكل حاوية تتضمن عناصر (خطوط) يتم تشكيلها في كل مرة بواسطة علامة li. وفقًا لذلك، يتم إقران علامة li وأحرف صغيرة.

تقصير مظهريتم تمثيل العلامة بدائرة مملوءة. ومع ذلك، يمكنك تغيير مظهره باستخدام سمة النوع، التي تحتوي على القيم التالية: قرص، دائرة، مربع. قيمة القرص (التي تحدد مظهر العلامة كدائرة مملوءة) هي القيمة الافتراضية. أي أنه إذا لم يتم تحديد سمة النوع، فسيبدو مظهر العلامة كدائرة مملوءة. إذا أضفنا هذه السمات إلى علامة ul، نحصل على الخيارات التالية:

وبطبيعة الحال، كل علامة من عنصر منفصل قائمة نقطيةيمكنك إعطائها مظهرك الخاص عن طريق تحديد القيم المناسبة لسمة النوع.

قوائم HTML مرقمة - علامات ol وli

الآن دعونا نرى كيف يتم تشكيل قائمة مرقمة باستخدام علامات ol (علامة كتلة وزوج مشابهة لـ ul). يتم استخدام علامة li هنا أيضًا كعلامة تحدد عناصر القائمة المرقمة في HTML. القائمة المرقمة هي مجموعة من العناصر المرقمة. يتم تحديد نوع الترقيم بواسطة سمة النوع، والتي يمكن أن تأخذ القيم التالية:

• أ - الحروف اللاتينية الكبيرة؛
• أ - الحروف اللاتينية الصغيرة؛
• أنا - الأرقام الرومانية الكبيرة؛
• ط - الأرقام الرومانية الصغيرة؛
• 1- الأرقام العربية

يمكنك أيضًا تقديم قائمة مرقمة حيث يتم ترقيم العناصر بترتيب عكسي، على سبيل المثال: 3، 2، 1. ويتم ذلك باستخدام السمة الاحتياطية للعلامة ol.

يوجد أيضًا خيار بدء قائمة ذات تعداد نقطي من أي رقم غير الرقم 1. للقيام بذلك، يمكنك استخدام سمة البداية، ولا يهم القيمة التي تم تعيين سمة النوع عليها. شاهد مثالاً لاستخدام سمة الاسم بالتزامن مع قيم سمات النوع المختلفة (1 وI):

قوائم تعريف HTML - علامات dl، dd، dt

نوع آخر من قائمة HTML هو قائمة التعريفات. يتم تشكيلها على النحو التالي. يقع محتوى هذه القائمة بين علامتي الفتح والإغلاق، اللتين تشكلان الحاوية. تحدد العلامة dt مصطلحًا، وتصف العلامة dd هذا المصطلح.

كما ترون، يتم نقل محتوى علامة dt، وهو مصطلح، إلى اليسار، ويتم كتابة محتوى علامة dd، وهو تعريف هذا المصطلح، بخط مائل. كل هذا يتم تحقيقه من خلال استخدام أنماط CSS المختلفة، والتي سنتحدث عنها بالتأكيد في المنشورات القادمة.

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

تحتوي لغة ترميز النص التشعبي HTML على علامة

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

بناء جملة العلامة

• العنصر رقم 1
• العنصر رقم 2
• العنصر رقم 3
• ...

يُترجم هذا الرمز إلى قائمة ذات تعداد نقطي على الموقع:

• العنصر رقم 1
• العنصر رقم 2
• العنصر رقم 3

بطاقة شعار

يتطلب الاستخدام الإلزامي لعلامة الإغلاق
.

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

ماذا يمكن أن يكون محتوى القائمة ذات التعداد النقطي؟

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

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

يعتمد على الكتلة، لذا فهو يشغل كامل المساحة المتاحة له، ويقتصر على حافة الشاشة، أو إطار الجدول، أو عناصر الصفحة الأخرى.
يُسمح بمرفقات القائمة داخل القائمة.

على سبيل المثال

• العنصر رقم 1
• • البند رقم 2-1
  • العنصر رقم 2-2
  • العنصر رقم 2-3
• العنصر رقم 3
• ...

سمات العلامة والخصائص

سمة العلامة المستخدمة على نطاق واسع

هي سمة كتابة تشير إلى الشكل الذي ستبدو عليه علامة القائمة. يمكن أن تأخذ القيم التالية

1. اكتب = "القرص" - علامة على شكل دائرة مملوءة (هذه القيمة هي القيمة الافتراضية). كان مثال القرص أعلى قليلاً.

2. اكتب = "دائرة" - علامة على شكل دائرة شفافة

على سبيل المثال:

• العنصر رقم 1
• العنصر رقم 2

• العنصر رقم 1
• العنصر رقم 2

3. اكتب = "مربع" - علامة على شكل مربع

على سبيل المثال:

• العنصر رقم 1
• العنصر رقم 2

وهذا ما يبدو عليه في الصفحة:

• العنصر رقم 1
• العنصر رقم 2
ملاحظة 1

في CSS، يتم تحديد نوع التعداد النقطي باستخدام سمة نوع نمط القائمة:

• ...

دعونا نلقي نظرة على القيم التي يمكن أن يتخذها نوع نمط القائمة:

• القرص - علامة على شكل دائرة (المثال أعلاه)
• دائرة - علامة على شكل دائرة شفافة (المثال أعلاه)
• مربع - علامة على شكل مربع (المثال أعلاه)
• عشري - علامة على شكل قائمة مرقمة بالأرقام العربية: 1، 2، 3، ...
• العلامة العشرية الرائدة صفر - علامة على شكل قائمة مرقمة بالأرقام العربية بصفر بادئ: 01، 02، 03، ...
• Lower-roman - علامة على شكل قائمة مرقمة في الأبجدية الرومانية بأحرف صغيرة: i، ii، iii، iv، v
• الكتابة الرومانية العليا - علامة على شكل قائمة مرقمة في الأبجدية الرومانية بأحرف كبيرة: I، II، III، IV، V
• اللاتينية السفلية - علامة على شكل قائمة بالأبجدية اللاتينية بأحرف صغيرة: a، b، c، d، ...
• اللاتينية العلوية - علامة على شكل قائمة بالأبجدية اللاتينية بأحرف كبيرة: A، B، C، D، ...
• اليونانية السفلية - علامة على شكل قائمة بالأبجدية اليونانية بأحرف صغيرة
• اليونانية العليا - علامة على شكل قائمة بالأبجدية اليونانية بأحرف كبيرة
ملاحظة 2

يمكن تعيين السمة للعلامة نفسها

، والعلامات
• . عند تعيين سمة إلى علامة
  سيتم عرض كافة عناصر القائمة كما هو موضح بواسطة السمة. ولكن يمكننا أن نعطي هذا العنصر أو ذاك عرضه الخاص. المثال في الصورة:

  يبدو الرمز كما يلي:

  • العنصر رقم 1
  • العنصر رقم 2
  • العنصر رقم 3

  • العنصر رقم 1
  • العنصر رقم 2
  • العنصر رقم 3

  تغيير علامات العلامات

  باستخدام CSS

  عناصر القائمة النقطية التي تم إنشاؤها بواسطة العلامة

  ، يمكن تمييزها بصور عشوائية. يتم استخدام CSS لتغيير نوع العلامة. على سبيل المثال

  • العنصر رقم 1
  • العنصر رقم 2
  • العنصر رقم 3

  وهذا ما يبدو عليه في الصفحة:

  • العنصر رقم 1
  • العنصر رقم 2
  • العنصر رقم 3

  ج باستخدام CSSيمكننا ضبط أنواع أخرى من عرض العلامات. ولكن عليك أن تتذكر ذلك عند تحديد أي نمط للعلامة

  ، فهو ينطبق على جميع عناصر القائمة.

  والفرق الوحيد هو أن هذه العلامة مخصصة لقوائم الترقيم فقط. يأتي اسم العلامة من الاختصار الإنجليزي "القائمة المطلوبة" - قائمة مرقمة.

  بناء جملة العلامة

  1. العنصر رقم 1
  2. العنصر رقم 2
  3. العنصر رقم 3
  4. ...

  حيث يمكن أن تأخذ سمة type = "value" القيم التالية

  • أ - يضع علامات على شكل أحرف لاتينية كبيرة (أ، ب، ج..)؛
  • أ - يضع علامات على شكل أحرف لاتينية صغيرة (أ، ب، ج..)؛
  • I - يضع علامات على شكل أرقام رومانية كبيرة (I، II، III، IV..) ؛
  • i - يضع علامات على شكل أرقام رومانية صغيرة (i، ii، iii، iv..)؛
  • 1 (افتراضي) - يضبط العلامات على شكل أرقام عربية (1، 2، 3..)؛

  تحدد سمة البداية = "القيمة" القيمة الأولية (قيمة البداية) للتقرير.

  تحدد السمة المعكوسة العد العكسي (إذا لزم الأمر).

  بطاقة شعار

  يتطلب الاستخدام الإلزامي لعلامة الإغلاق

  لتكوين عناصر القائمة، يتم استخدام علامة مقترنة

  • . توجد بين علامتي الفتح والإغلاق كلمات وعبارات وفقرات وصور وأجزاء من التعليمات البرمجية الفردية وغير ذلك الكثير التي تمثل محتوى القائمة ذات التعداد النقطي.

    ملحوظة

    داخل القائمة يمكنك تغيير الحساب إلى حسابك. هناك قيمة سمة خاصة = "" على العلامة لهذا الغرض.

  • ، والتي تم تعيين بعض القيمة الرقمية لها. على سبيل المثال

    1. العنصر رقم 1
    10. العنصر رقم 2
    11. العنصر رقم 3

  أمثلة مع قوائم مرقمة في html (

  )

  مثال 1. قائمة ترقيم HTML بالأحرف اللاتينية

  مثال بالأحرف الكبيرة

  1. العنصر رقم 1
  2. العنصر رقم 2
  3. العنصر رقم 3

  1. العنصر رقم 1
  2. العنصر رقم 2
  3. العنصر رقم 3

  مثال بأحرف صغيرة

  1. العنصر رقم 10
  2. العنصر رقم 11
  3. العنصر رقم 12

  وهذا هو ما يبدو على الصفحة:

  1. العنصر رقم 1
  2. العنصر رقم 2
  3. العنصر رقم 3

  مثال 2. قائمة ترقيم HTML بالأحرف الرومانية

  مثال بالأحرف الكبيرة

  1. العنصر رقم 1
  2. العنصر رقم 2
  3. العنصر رقم 3

  وهذا هو ما يبدو على الصفحة:

  1. العنصر رقم 1
  2. العنصر رقم 2
  3. العنصر رقم 3

  مثال بأحرف صغيرة

  1. العنصر رقم 1
  2. العنصر رقم 2
  3. العنصر رقم 3

  وهذا هو ما يبدو على الصفحة:

  1. العنصر رقم 1
  2. العنصر رقم 2
  3. العنصر رقم 3

  مثال 3. قائمة مرقمة html موضع بداية مختلف

  مثال يوضح إمكانيات خاصية البداية، والتي تسمح لك بتعيين قيمة البداية للعداد.

  50. العنصر رقم 1
  51. العنصر رقم 2
  52. العنصر رقم 3

  وهذا هو ما يبدو على الصفحة:

  1. العنصر رقم 1
  2. العنصر رقم 2
  3. العنصر رقم 3

  مثال 4. تغيير العدد في قوائم html المرقمة

  فيما يلي مثال على إمكانية تغيير قيم العداد باستخدام سمة القيمة عند عرض عناصر جديدة في العلامات

  • .

    10. العنصر رقم 1
    11. العنصر رقم 2
    100. العنصر رقم 3
    101. العنصر رقم 4

    وهذا هو ما يبدو على الصفحة:

    1. العنصر رقم 1
    2. العنصر رقم 2
    3. العنصر رقم 3
    4. العنصر رقم 4

    مثال 5. عكس القائمة المرقمة في HTML

    فيما يلي مثال لقائمة ذات تعداد عكسي (العد بترتيب عكسي).

    10. العنصر رقم 1
    11. العنصر رقم 2
    12. العنصر رقم 3
    13. العنصر رقم 4

    وهذا هو ما يبدو على الصفحة:

    1. العنصر رقم 1
    2. العنصر رقم 2
    3. العنصر رقم 3
    4. العنصر رقم 4
    إذا قررت تغيير قوائم UL وLI القياسية، فسيكون هذا الموضوع مثيرا للاهتمام بالنسبة لك. لأنك هنا سوف تتعلم العديد من الحلول الأصلية. وهو ما سيساعدك بالتأكيد على التغيير طريقة العرض القياسيةإلى أسلوب فريد من نوعه، حيث يذهب أسلوب CSS، لتصميم القوائم. الميزة هي أننا سنستخدم فئة واحدة فقط طوال الوقت، الأمر الذي سيغير المظهر بشكل جذري. بالإضافة إلى هذه المعلمات، يمكنك تحديد الرقم الذي يجب أن تبدأ القائمة، هنا يمكنك أن تفعل كل شيء بنفسك. قيمة البداية الافتراضية للقوائم المرقمة هي عند الحرف الأول أو الحرف A.

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

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

    تحتاج أيضًا إلى معرفة أن القوائم تحتوي في البداية على عدة عناصر:

    1 . معلومات غير منظمة.
    2 . معلومات منظمة.
    3 . تعريفات.

    لنبدأ التثبيت:

    1. الخيار:

    
    
    • قائمة الاغراض
    
    
    • قائمة فريدة من نوعها
    
    
    • القوائم الأصلية
    
    
    • ZORNET.RU - مشرف الموقع
    
    
    • قائمة أخرى
    
    
    
    CSS

    كسانجيلوبان (
    الهامش: 19 بكسل 0 0;
    الحشو: 0؛
    نمط القائمة: لا شيء؛
    إعادة ضبط العداد: li؛
    }
    .كسانجيلوبان لي (
    الحد: 2 بكسل صلب #3575ad؛
    الخلفية: #d7dee4؛
    الموقف: نسبي؛
    الهامش السفلي: 17 بكسل؛
    الحشو: 15 بكسل 9 بكسل؛
    }
    .كسانجيلوبان لي: تحوم (
    مؤشر z: 1؛
    }
    .كسانجيلوبان لي: قبل (
    الحدود: 2 بكسل صلب #2270b3؛
    الموقف: مطلق؛
    أعلى: -14px؛
    الحشو: 3 بكسل 9 بكسل؛
    حجم الخط: 11 بكسل؛
    وزن الخط: غامق؛
    اللون: #246eaf؛
    الخلفية: #f2f4f7؛
    الزيادة المضادة: لي؛
    المحتوى: عداد (لي)؛
    -مدة انتقال مجموعة الويب: 0.4 ثانية؛
    مدة الانتقال: 0.4 ثانية؛
    }
    .ksangelopan لي:تحوم:قبل (
    الخلفية: #2672b3؛
    اللون: #f7f9fb؛
    -تحويل webkit: ترجمة (-11px، 0)؛
    -ms-transform: ترجمة(-11px, 0);
    -تحويل: ترجمة(-11px, 0);
    تحويل: ترجمة (-11 بكسل، 0)؛
    }
    .كسانجيلوبان لي: بعد (
    محتوى: ""؛
    الموقف: مطلق؛
    مدة الانتقال: 0.3 ثانية؛
    -خاصية انتقال-webkit: العرض؛
    خاصية الانتقال: العرض؛
    مؤشر z: -1؛
    الخلفية: #FFF؛
    الارتفاع: 100%؛
    اليسار: 0؛
    أعلى: 0؛
    العرض: 0;
    }
    .كسانجيلوبان لي:تحوم:بعد (
    العرض: 100%؛
    }

    
    هذا كل شيء من أجل التثبيت.

    2 الخيار الثاني:

    

    
    
    • قائمة الاغراض
    
    
    • قائمة فريدة من نوعها
    
    
    • القوائم الأصلية
    
    
    • ZORNET.RU - مشرف الموقع
    
    
    • قائمة أخرى
    
    
    
    CSS

    بيليدوزلوبامجيس (
    الهامش السفلي: 8 بكسل؛
    الحشو: 0؛
    نمط القائمة: لا شيء؛
    إعادة ضبط العداد: li؛
    }
    .beleduzlopamges لي (
    الموقف: نسبي؛
    الحدود: 2 بكسل صلب #195588؛
    الخلفية: #eff3f7؛
    الحشو: 15px 19px 15px 27px؛
    الهامش: 12 بكسل 0 12 بكسل 40 بكسل؛
    -مدة انتقال مجموعة الويب: 0.3 ثانية؛
    مدة الانتقال: 0.3 ثانية؛
    }
    .beleduzlopamges لي:تحوم (
    الخلفية: #FFF؛
    }
    .beleduzlopamges لي: قبل (
    ارتفاع الخط: 32 بكسل؛
    الموقف: مطلق؛
    أعلى: 4 بكسل؛
    اليسار: -39 بكسل؛
    العرض: 39 بكسل؛
    محاذاة النص: مركز؛
    حجم الخط: 16 بكسل؛
    وزن الخط: غامق؛
    اللون: #f9f5f5؛
    الخلفية: #275b88؛
    الزيادة المضادة: لي؛
    المحتوى: عداد (لي)؛
    مدة الانتقال: 0.2 ثانية؛
    }
    .beleduzlopamges لي:تحوم: قبل (
    العرض: 46 بكسل؛
    }
    .beleduzlopamges لي:بعد (
    الموقف: مطلق؛
    اليسار: 0؛
    أعلى: 4 بكسل؛
    محتوى: ""؛
    الارتفاع: 0;
    العرض: 0;
    الحدود: 16px شفافة صلبة؛
    لون الحدود اليسرى: #275b88؛
    -مدة انتقال مجموعة الويب: 0.2 ثانية؛
    مدة الانتقال: 0.2 ثانية؛
    }
    .beleduzlopamges لي:تحوم: بعد (
    الهامش الأيسر: 6 بكسل؛
    }

    
    يمكنك ضبط جاما المركزية بشكل مستقل لتتناسب مع النمط الرئيسي للموقع.

    3 الخيار الثالث:

    

    
    
    • مخطوطات لuCoz
    
    
    • قوالب uCoz
    
    
    • تصميم الموقع
    
    
    • أنماط الموقع
    
    
    • التصميم باستخدام CSS
    
    
    
    CSS

    نيزواليسانيلاغ (
    الحشو: 0؛
    نمط القائمة: لا شيء؛
    إعادة ضبط العداد: li؛
    }
    .نيزواليزانيلاج لي (
    الموقف: نسبي؛
    الحشو: 9 بكسل 17 بكسل 17 بكسل 25 بكسل؛
    الهامش الأيسر: 39 بكسل؛
    مدة الانتقال: 0.2 ثانية؛
    المؤشر: المؤشر؛
    وزن الخط: غامق؛
    اللون: #343638؛
    }
    .nizualisanelag لي: قبل (
    الحدود: 3px شفافة صلبة؛
    ارتفاع الخط: 35 بكسل؛
    الموقف: مطلق؛
    أعلى: 0؛
    اليسار: -29 بكسل؛
    العرض: 41 بكسل؛
    محاذاة النص:مركز؛
    حجم الخط: 14 بكسل؛
    وزن الخط: غامق؛
    اللون: #619dce؛
    الزيادة المضادة: لي؛
    المحتوى: عداد (لي)؛
    مدة الانتقال: 0.3 ثانية؛
    
    تحجيم الصندوق: صندوق الحدود؛
    }
    .nizualisanelag لى:تحوم: قبل (
    اللون: #337AB7؛
    }
    .nizualisanelag لي: بعد (
    الموقف: مطلق؛
    أعلى: 0؛
    اليسار: -29 بكسل؛
    العرض: 41 بكسل؛
    الارتفاع: 41 بكسل؛
    الحدود: 5px صلب #468bd0؛
    نصف قطر الحدود: 50%؛
    محتوى: ""؛
    العتامة: 0.5؛
    -webkit-box-sizing: border-box؛
    -moz-box-sizing: border-box؛
    تحجيم الصندوق: صندوق الحدود؛
    }
    .nizualisanelag لي:تحوم: بعد (
    الرسوم المتحركة: 500 مللي ثانية سهولة الدخول والخروج 0 ثانية؛
    العتامة: 1؛
    }

    @keyframes BounceIn (
    0% {
    العتامة: 0؛
    تحويل: Scale3d(.3, .3, .3);
    }
    20% {
    تحويل:scale3d(1.3, 1.3, 1.3);
    }
    40% {
    تحويل: Scale3d(.9, .9, .9);
    }
    60% {
    العتامة: 1؛
    تحويل:scale3d(1.03, 1.03, 1.03);
    }
    80% {
    تحويل:scale3d(.97، .97، .97)؛
    }
    ل (
    العتامة: 1؛
    تحويل:scale3d(1, 1, 1);
    }
    }

    
    يأتي مع الرسوم المتحركة الجميلة.

    4 الخيار الرابع:

    

    
    
    • العنصر الأول للموقع
    
    
    • العنصر الثاني للموقع
    
    
    • العنصر الثالث للموقع
    
    
    • العنصر الرابع للموقع
    
    
    • العنصر الخامس للموقع
    
    
    
    CSS

    الحشو: 0؛
    نمط القائمة: لا شيء؛
    }
    .كوديزامودين لي(
    الحشو: 6 بكسل؛
    }
    .كوديزامودين لي: قبل (
    الحشو على اليمين: 11 بكسل؛
    وزن الخط: غامق؛
    اللون: #4979a0؛
    المحتوى: "\2606";
    مدة الانتقال: 0.4 ثانية؛
    }
    .kudezamuden لي:تحوم:قبل (
    اللون: #235e90؛
    المحتوى: "\2605";
    }

    
    مشابه الإصدارات السابقة، تم تغيير الأيقونة نفسها فقط.

    بشكل عام، هذه مجموعة صغيرة من القوائم التي ستسمح لمشرف الويب بإنشاء قائمة جميلة على البوابة، حيث يمكنه تصميمها أكثر، كما يريد هو نفسه رؤيتها.

    إذا كنت بحاجة إلى وضع عناصر في قائمة مرقمة بدلاً من قائمة ذات تعداد نقطي، فسيتم استخدام HTML المطلوب. يتم إنشاء هذه القائمة باستخدام العلامة ol. يبدأ الترقيم من واحد ويزداد بمقدار واحد لكل عنصر قائمة مرتب لاحق باستخدام علامة li.

    قوائم HTMLتستخدم لتجميع أجزاء من المعلومات ذات الصلة. هناك ثلاثة أنواع من القوائم:

    قائمة نقطية —

    - كل عنصر من عناصر القائمة
    • تم وضع علامة عليها بعلامة ،
      قائمة مرقمة —
      - كل عنصر من عناصر القائمة
      1. تم وضع علامة برقم
         قائمة التعاريف- - تتكون من أزواج مصطلحات
         —
         تعريف.

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

         إنشاء قوائم HTML

         1. قائمة ذات تعداد نقطي

         قائمة نقطيةهي قائمة غير مرتبة (من القائمة الإنجليزية غير المرتبة). تم إنشاؤها باستخدام علامة مقترنة

         . علامة عنصر القائمة هي تسمية، على سبيل المثال، دائرة مملوءة.

         تضيف المتصفحات بشكل افتراضي التنسيق التالي إلى كتلة القائمة:

         يتم إنشاء كل عنصر في القائمة باستخدام علامة مقترنة

      2. (من عنصر القائمة الإنجليزية).
      متاح .
      • مايكروسوفت
      • جوجل
      • تفاحة
      أرز. 1. قائمة ذات تعداد نقطي

      2. قائمة مرقمة

      قائمة مرقمةيتم إنشاؤه باستخدام علامة مقترنة. يتم أيضًا إنشاء كل عنصر قائمة باستخدام العنصر

    • . يقوم المتصفح بترقيم العناصر بالترتيب تلقائيًا، وإذا قمت بحذف عنصر أو أكثر من هذه القائمة، فسيتم إعادة حساب الأرقام المتبقية تلقائيًا.

      تحتوي كتلة القائمة أيضًا على أنماط المتصفح الافتراضية:

    • تتوفر سمة القيمة، والتي تسمح لك بتغيير الرقم الافتراضي لعنصر القائمة المحدد. على سبيل المثال، إذا كان للعنصر الأول في القائمة التي قمت بتعيينها
    • ، فسيتم إعادة حساب الترقيم المتبقي بالنسبة إلى القيمة الجديدة.

      للعلامة

      السمات التالية متوفرة:
      الجدول 1. سمات العلامة

      يصف	الوصف، القيمة المقبولة
      عكس	تؤدي السمة المعكوسة إلى عرض القائمة بترتيب عكسي (على سبيل المثال، 9، 8، 7...).
      يبدأ	تحدد سمة البداية القيمة الأولية التي سيبدأ منها الترقيم، على سبيل المثال، البناء سيتم تعيين الرقم التسلسلي "10" للعنصر الأول. يمكنك أيضًا تحديد نوع الترقيم في نفس الوقت، على سبيل المثال، .
      يكتب	تحدد سمة النوع نوع العلامة التي سيتم استخدامها في القائمة (أحرف أو أرقام). القيم المقبولة: 1 - القيمة الافتراضية، الترقيم العشري. أ - ترقيم القائمة بالترتيب الأبجدي، بالأحرف الكبيرة (أ، ب، ج، د). أ - ترقيم القائمة بالترتيب الأبجدي، بالأحرف الصغيرة (أ، ب، ج، د). I - الترقيم بالأرقام الرومانية الكبيرة (I، II، III، IV). i - الترقيم بالأرقام الرومانية الصغيرة (i، ii، iii، iv).

      1. مايكروسوفت
      2. جوجل
      3. تفاحة
      أرز. 2. قائمة مرقمة

      3. قائمة التعاريف

      قوائم التعاريفيتم إنشاؤها باستخدام علامة

      . لإضافة مصطلح، استخدم علامة
      وإدراج تعريف - العلامة
      .

      تحتوي كتلة قائمة التعريفات على أنماط المتصفح الافتراضية التالية:

      للعلامات

      ,

      و

      متاح .

      مخرج:

      بيتر توتشيلين

      يقذف:

      أندريه جيدوليان

      أليكسي جافريلوف

      فيتالي جوجونسكي

      ماريا كوزيفنيكوفا

      
      أرز. 3. قائمة التعاريف

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

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

      • الفقرة 1.
      • النقطة 2.
        • البند الفرعي 2.1.
        • البند الفرعي 2.2.
          • البند الفرعي 2.2.1.
          • البند الفرعي 2.2.2.
        • البند الفرعي 2.3.
      • النقطة 3.

      
      أرز. 4. قائمة متداخلة

      5. قائمة مرقمة متعددة المستويات

      يتم استخدام القائمة متعددة المستويات لعرض عناصر القائمة على مستويات مختلفة بمسافات بادئة مختلفة. سيكون ترميز القائمة المرقمة متعددة المستويات كما يلي:

      1. فقرة
      2. فقرة
         1. فقرة
         2. فقرة
         3. فقرة
            1. فقرة
            2. فقرة
            3. فقرة
         4. فقرة
      3. فقرة
      4. فقرة

      سيؤدي هذا الترميز الافتراضي إلى إنشاء ترقيم جديد لكل قائمة متداخلة، بدءًا بواحد. لإنشاء ترقيم متداخل، تحتاج إلى استخدام الخصائص التالية:
      تقوم ميزة إعادة تعيين العداد بإعادة تعيين عداد واحد أو أكثر، مع تحديد القيمة التي سيتم إعادة تعيينها؛
      تحدد الزيادة المضادة قيمة زيادة العداد، أي. في أي زيادات سيتم ترقيم كل عنصر لاحق؛
      المحتوى - المحتوى الذي تم إنشاؤه، وفي هذه الحالة يكون مسؤولاً عن عرض الرقم قبل كل عنصر في القائمة.

      Ol ( /* إزالة الترقيم القياسي */ نمط القائمة: لا شيء؛ /* تحديد العداد وإعطائه الاسم li. لم يتم تحديد قيمة العداد - افتراضيًا هي 0 */ counter-reset: li; ) li :before ( /* نحدد العنصر الذي سيتم ترقيمه - li. يشير العنصر الزائف قبل إلى أن المحتوى المدرج باستخدام خاصية المحتوى سيتم وضعه قبل عناصر القائمة. هنا أيضًا نقوم بتعيين قيمة زيادة العداد (افتراضي) هو 1).*/ counter-increment: li; / * تعرض خاصية المحتوى رقم عنصر القائمة.counters() تعني أن النص الذي تم إنشاؤه يمثل قيم جميع العدادات التي تحمل هذا الاسم. نقطة بين علامتي الاقتباس يضيف فترة فاصلة بين الأرقام، وتضاف نقطة بمسافة قبل محتوى كل عنصر في القائمة */ content: counters(li,".") "."; )
      أرز. 5. قائمة مرقمة متعددة المستويات