قوائم 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. قائمة مرقمة متعددة المستويات

يوم جيد!

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

هذه المقالة هي الثالثة في هذه الدورة القصيرة حول أساسيات HTML. قبل قراءة هذا الدرس أنصحك بالاطلاع على الدرسين السابقين:

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

في كل جزء من المقالة، سيكون إنشاء قوائم معينة مصحوبًا بشرح تفصيلي لإدراج قائمة معينة.

1. القوائم النقطية في HTML

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

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

أرز. 1.1. العرض القياسي لقائمة HTML ذات تعداد نقطي غير مرتبة في المتصفح

1.1 الرموز النقطية القياسية للقوائم النقطية

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

1.2 قائمة العلامة على شكل دائرة فارغة

أنت تعرف قيم السمات، ولكن الآن دعونا نرى كيفية إنشاء قائمة نقطية HTML في التعليمات البرمجية. من الجدول أعلاه، اخترنا القيمة الثانية "الدائرة" لسمة النوع وقمنا بتعيينها في قائمتنا النقطية:

<أتش تي أم أل > <الرأس > <العنوان >مثال لقائمة ذات تعداد نقطي مع علامة دائرة فارغة</العنوان> </الرأس> <الجسم > <ص>النجوم:</ ع> <نوع ul = "دائرة"> <لى>سيريوس</ لى> <لى>السماك القطبية</ لى> <لى>بولوكس</ لى> <لى>منكب الجوزاء</ لى> <لى>شمس</ لى> </ أول> </ الجسم> </أتش تي أم أل>

دعونا نرى على الفور كيف سيبدو هذا الرمز في المتصفح:

أرز. 1.2. عرض علامة القائمة على شكل دائرة في المتصفح

1.3 قائمة العلامات على شكل مربع

دعونا نلقي نظرة أيضًا على المثال الأخير الذي يحتوي على علامة مربعة لقائمة HTML:

انتبه للعلامة فقد أصبحت مربعة:

أرز. 1.3. عرض علامة القائمة كمربع في المتصفح

ملاحظة مهمة:لم تعد هذه الطريقة تُستخدم لإنشاء أنماط للقوائم ذات التعداد النقطي. هناك فصل واضح بين CSS (اقرأ ما هو CSS) وHTML. HTML مخصص للترميز وCSS مخصص لإنشاء مظهر جذاب.

الكود الذي يحتوي على هذه السمة عند تحديد نوع المستند الحالي كـ HTML5 ("")، سيظهر خطأ أثناء التحقق من الصحة. إذا لم تكن قد سمعت ما هو التحقق من الصحة، فهذا هو المكان المناسب لك.

الخطأ سيكون على النحو التالي:

أرز. 1.4. حدث خطأ في أداة التحقق من الصحة عند استخدام خاصية "النوع" الخاصة بالقائمة

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

2. قوائم مرقمة في HTML

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

مثال على قائمة مرقمة:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15

<أتش تي أم أل > <الرأس > <العنوان >مثال على قائمة مرقمة قياسية</العنوان> </الرأس> <الجسم > <ص>من الواحد إلى الخامس:</ ع> <رأ> <لى>أولاً</ لى> <لى>ثانية</ لى> <لى>ثالث</ لى> <لى>الرابع</ لى> <لى>الخامس</ لى> </رأ> </ الجسم> </أتش تي أم أل>

هذا ما تبدو عليه القائمة المرقمة مع إعدادات المتصفح القياسية:

أرز. 2.1. قائمة مرقمة في المتصفح مع الإعدادات القياسية

مثل سابقتها (القائمة النقطية)، لديها أنماطها الخاصة لعرض الأرقام. الترقيم العادي ليس هو النوع الوحيد من التعداد النقطي لقائمة مرقمة في HTML.

2.1 الرموز النقطية القياسية للقوائم المرقمة

هنا لدينا خيار ليس من بين ثلاثة أنواع من العلامات، بل من خمسة:

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

2.2 الترقيم الخاص في قائمة HTML

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

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15

<أتش تي أم أل > <الرأس > <العنوان >ترقيم مخصص لقائمة مرقمة</العنوان> </الرأس> <الجسم > <ص>نبدأ بالترقيم من اثني عشر:</ ع> <نوع ol = "أ" ابدأ = "12"> <لى>اثني عشر</ لى> <لى>ثلاثة عشر</ لى> <لى>أربعة عشرة</ لى> <لى>خمسة عشر</ لى> <لى>السادس عشر</ لى> </رأ> </ الجسم> </أتش تي أم أل>

وإليك كيف سيظهر على الموقع الحقيقي:

أرز. 2.2. الترقيم من رقم عشوائي في قائمة مرقمة

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

حسنًا، لننتقل الآن إلى قوائم HTML المتداخلة.

3. كيفية عمل قائمة متعددة المستويات (متداخلة) في لغة HTML

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

باستخدام نماذج السيارات كمثال، سنقوم ببناء قائمة متعددة المستويات بتنسيق HTML:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22

<أتش تي أم أل > <الرأس > <العنوان > HTML قائمة نقطية متداخلة</العنوان> </الرأس> <الجسم > <أول> <لى>سيتروين<أول> <لى>بيرلينجو</ لى> <لى>ج1</ لى> <لى>ج2</ لى> <لى> C3 بيكاسو</ لى> <لى>سي 4 جراند بيكاسو</ لى> </ أول> </ لى> <لى>كيا</ لى> <لى>تويوتا</ لى> <لى>أودي</ لى> <لى>لكزس</ لى> </ أول> </ الجسم> </أتش تي أم أل>

لاحظ كيف تبدو القائمة متعددة المستويات في المتصفح:

أرز. 3.1. مثال لقائمة متعددة المستويات في HTML

لقد أنشأنا قائمة متعددة المستويات باستخدام التعداد النقطي (tag

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

ولكن يمكننا دمج القوائم متعددة المستويات مع القوائم المرقمة والتعداد النقطي مثل هذا:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23

<أتش تي أم أل > <الرأس > <العنوان >قوائم مرقمة ونقطية ومتعددة المستويات بلغة HTML</العنوان> </الرأس> <الجسم > <أول> <لى>المجموعة الأولى من زهور التوليب<رأ> <لى>الصف الاول<أول> <لى>زهور التوليب المبكرة البسيطة</ لى> </ أول> </ لى> <لى>الصف الثاني<أول> <لى>تيري التوليب</ لى> </ أول> </ لى> </رأ> </ لى> </ أول> </ الجسم> </أتش تي أم أل>

في المثال أعلاه لدينا تداخل مزدوج (مستويين). أولاً، تم تضمين قائمة بفئتين من زهور التوليب؛ ثم يتم تضمين قائمة ذات تعداد نقطي داخل كل عنصر من العناصر الموجودة في القائمة ذات التعداد الرقمي.

دعونا نلقي نظرة على مظهره في المتصفح:

أرز. 3.2. مثال لقائمة مرقمة متعددة المستويات لقائمة ذات تعداد نقطي في المتصفح

4. مواد مفيدة في قوائم HTML

هذه هي المعلومات التي تتطلب فهم خصائص CSS. وللقيام بذلك أنصح بدراسة الدروس التالية: . سيتم دمج جميع الأمثلة فورًا مع الكود المصدري وتقسيمها إلى علامات تبويب HTML (البنية) وCSS (الأنماط) والنتيجة (النتيجة).

4.1 كيفية تحويل قائمة HTML إلى سلسلة

قد يكون تحويل قائمة HTML إلى سلسلة ضروريًا عند إنشاء قائمة أفقية. فإنه من السهل جدا القيام به:

4.2 كيفية عمل قائمة HTML بدون أيقونة

خاصية نوع القائمة في CSS هي المسؤولة عن هذا (مزيد من التفاصيل):

4.3 كيفية توسيط القائمة في HTML

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

4.4 كيفية إنشاء قائمة بتنسيق HTML بالصور

خاصية CSS واحدة فقط، list-style-image، تكفي. داخل عنوان URL، حدد العنوان قبل الرمز. أريد فقط أن أشير إلى أنه من الأفضل تحديد صورة صغيرة على الفور، لأن ارتفاع سطر القائمة يعتمد عليها:

4.5 قائمة نقطية HTML الخاص بك

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

4.6 كيفية عمل قائمة بلغة HTML في عدة أعمدة

لإنشاء قائمة في عدة أعمدة، سنستخدم خاصية عدد أعمدة CSS (الخاصية مدعومة فقط في المتصفحات التالية: IE 10+، Chrome 1.0+، Opera 11.1+، Safari 3.0+، Firefox 1.5+). تحتاج أيضًا إلى ضبط ارتفاع القائمة لرؤية التقسيم إلى أعمدة متعددة:

5. تدرب على العمل مع القوائم

في الفيديو أدناه، يمكنك رؤية كل العمل باستخدام قوائم HTML عمليًا:

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

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

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 بكسل؛
- مدة انتقالية webkit: 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.

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

، ويبدأ كل عنصر في القائمة بعلامة
• ، كما هو مبين أدناه.
  • النقطة الأولى
  • النقطة الثانية
  • النقطة الثالثة

  يجب أن تحتوي القائمة على علامة إغلاق

وإلا سيحدث خطأ. علامة الإغلاق

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

يوضح المثال 11.1 كود HTML لإضافة قائمة ذات تعداد نقطي إلى صفحة ويب.

مثال 11.1. إنشاء قائمة ذات تعداد نقطي

---

• تشيبوراشكا
• تمساح جينا
• شابوكلياك
• الفئران لاريسا

---

وتظهر نتيجة هذا المثال في الشكل. 11.1.

أرز. 11.1. عرض القائمة ذات التعداد النقطي

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

يمكن أن تتخذ العلامات أحد الأشكال الثلاثة: دائرة (افتراضية)، ودائرة، ومربع. لتحديد نمط العلامة، استخدم سمة نوع العلامة

. القيم المقبولة مذكورة في الجدول. 11.1
طاولة 11.1. قائمة أنماط التعداد النقطي

نوع القائمة	كود HTML	مثال
قائمة ذات تعداد نقطي على شكل دائرة		أولاً ثانية ثالث
قائمة ذات تعداد نقطي على شكل دائرة		أولاً ثانية ثالث
قائمة ذات تعداد نقطي مربع		أولاً ثانية ثالث

قد يختلف مظهر العلامات قليلاً في المتصفحات المختلفة، وكذلك عند تغيير الخط وحجم النص.

يظهر إنشاء قائمة ذات تعداد نقطي مربع في المثال 11.2.

مثال 11.2. نوع العلامات

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

• تغيير في العقيدة الدينية (اختياري: البوذية، الكونفوشيوسية، الهندوسية). عرض خاص - اليهودية والإسلام معًا؛
• تغير في الاعتقاد بعصمة الحزب المفضل؛
• الاعتقاد بوجود كائنات فضائية؛
• تفضيل النظام السياسي باعتباره الأفضل من نوعه (للاختيار من بين: الإقطاع، الاشتراكية، الشيوعية، الرأسمالية).




وتظهر نتيجة هذا المثال في الشكل. 11.2.




حصة هذه المادة:
مقالات مماثلة

17 أبريل 2015
لم يتم العثور على مفتاح حماية البرنامج 7

17 أبريل 2015
RLS – مرونة وضبط قيود الوصول إلى البيانات

17 أبريل 2015
كيفية تمكين الدعم في BIOS؟

17 أبريل 2015
كيفية إدراج الرموز على فكونتاكتي