مقدمة لمقالات إنتاج صفحة الويب: البحث وتطبيق عناصر قائمة HTML CSS UL ، OL ، DL.
1. يمكن اعتباره مقدمة للهراءتُستخدم عناصر قائمة HTML (مثل OL ، UL ، DL) على نطاق واسع في تطوير وإنتاج الموقع الحالي ، ولكن تختلف عمليات الإنتاج في المتصفحات المختلفة. تحلل هذه المقالة الخصائص الأساسية لعناصر القائمة هذه ، وقضايا التوافق المختلفة في المتصفحات المختلفة ، وتقدم بعض التطبيقات الشائعة.
يجب أن يكون من المفيد للمبتدئين أو أولئك الذين لديهم بعض الخبرة في CSS.
2. قائمة العناصر المتاحة في HTML 1. القائمة غير المرتبة: ULالقوائم غير المرتبة هي القوائم الأكثر استخدامًا. يوضح الشكل التالي عرض القوائم غير المرتبة في متصفحات مختلفة:
الصفحة التجريبية
كما هو موضح أعلاه ، تختلف الإعدادات الافتراضية للقوائم غير المرتبة ضمن متصفحات مختلفة قليلاً. بالطبع ، هناك عدد قليل من القوائم غير المرتبة التي لم يتم تعديلها في مشاريع الموقع الفعلي اليوم. أحد الأسباب هو إعادة تعيين CSS ، التي أزلت الرصاص الافتراضي للدراسة أو الهوامش أو الحشوات للقوائم غير المرتبة.
بعض خصائص CSS المحددة للقوائم غير المرتبة هي من نوع القائمة ، ووضع على طراز القائمة ، وصورة على غرار القائمة. تضع هذه الخصائص نوع الرصاص القائمة ، وموقع العلامة ، واستخدام الصور بدلاً من العلامات. يمكن دمج هذه الخصائص الثلاثة مع أسلوب القائمة.
يمكن تعيين سمة من نوع القائمة على بعض القيم المختلفة. يعرض الرسم البياني التالي تأثير صفحة بعض القيم:
اعتمادًا على متصفح المستخدم ونظام التشغيل ، لا يجوز عرض بعض القيم النمطية على غرار القائمة بشكل صحيح ، وعادة ما تكون الإعدادات الافتراضية للقيم العشرية. لا ينصح باستخدام قائمة غير ضرورية لزيادة القيمة ، لأن دلالات القائمة غير المرتبة نفسها لم تعد موجودة.
يمكن ضبط وضع على غرار القائمة على الخارج (افتراضي) أو في الداخل لموقف علامة القائمة. إذا تم تعيين صورة على غرار القائمة ، فسيؤثر ذلك أيضًا على موقع الصورة.
يمكن أن تعطي سمة صورة على غرار القائمة قوائم غير مرتبة أداءً فريدًا مخصصًا. لسوء الحظ ، فإن استخدام هذه الطريقة لإضافة أرقام المشروع في IE هو الكثير من الأخطاء ، لذلك نادراً ما يتم استخدامه. يتمثل الحل الأفضل في إضافة صورة خلفية إلى عنصر LI في القائمة ، وضبط موقع صورة الخلفية وفقًا لذلك وتعيينه على عدم التكرار. على MaxDesign.com ، تم عرض هذه الطريقة من خلال تفسيرات خطوة بخطوة وتعمل بشكل جيد في جميع المتصفحات.
2. القائمة المطلوبة: OLيتم استخدام القوائم المطلوبة عند الحاجة إلى قيمة تدريجية أمام كل عنصر قائمة من عنصر القائمة (على سبيل المثال 1 ، 2 ، 3 ، إلخ). يمكن تعيين نوع القائمة على غرار القائمة لقائمة مرتبة على أي قيمة يمكن تعيينها ضمن قائمة غير مرتبة. في معظم الحالات ، تسبق القائمة المطلوبة إما قيمة تدريجية أو لا تسبقها أي علامات. لا ينصح باستخدام القوائم المطلوبة لتحقيق سلوك مشابه للقوائم غير المرتبة. لهذا السبب ، لم تعد دلالات القائمة المطلوبة نفسها صحيحة.
3. قائمة التعريف: DLيتم استخدام قائمة التعريف لتمييز عناصر القائمة المحددة ، والتي تتضمن عنوان التعريف (DT) والتعريف نفسه (DD). ليست هناك حاجة للمطابقة تمامًا عند تحديد عنصر قائمة ، فإن الكود التالي قانوني تمامًا ضمن XHTML الصارم:
<dl> <dt> Miguhui Miguhui </dt> <dt> Copenhagen Conference </dt> <dd> "أكتوبر الحصار" </dd> </dl>
وبهذه الطريقة ، يمكنك استخدام DTs متعددة تحت DD واحد ، أو DDs متعددة تحت DT واحد.
تحديد العرض المرئي للقائمة. بشكل افتراضي ، يكون عرض كل متصفح هو نفسه كما هو موضح في الشكل أدناه:
الصفحة التجريبية
رمز HTML المقابل للصورة أعلاه هو كما يلي:
<dl> <dt> العنوان </dt> <dd> هنا هو التعريف </dd> </dl> <dl> <dt> أفلام شهيرة </dt> <dd> أكتوبر siege </dd> <dd> taoling </dd> <dd> ثلاث بنادق لصففع الجدول </dd> <dd> الموضوع </dt> <dd> سوق الأسهم </dd> <dd> أسعار المنازل </dd> <dd> يوم رأس السنة الجديدة </dd>
يمكن أيضًا أن يطلق على العناصر <mam> و <dir> ، من الناحية الفنية ، قوائم HTML ، لكنها عفا عليها الزمن في XHTML ، لذلك لا تتم مناقشتها بالتفصيل هنا.
5. قائمة في HTML5في HTML ، تظل القائمة غير المرتبة هي نفسها بشكل أساسي ، على الرغم من أنه يبدو الآن أنه يطلق عليها ببساطة قائمة ، وسيتم استخدام عناصر جديدة لالتفاف القائمة كملاحة.
يحتوي عنصر OL على تغيير طفيف ، ويحصل على خصائص جديدة: عكس ، وهي قيمة منطقية للإشارة إلى ما إذا كانت القائمة ترتفع أو تنخفض ؛ Start ، وهو عدد صحيح لإعلان نقطة انطلاق القائمة المطلوبة.
بالإضافة إلى ذلك ، ستتم إضافة عناصر <GINGE> و <التفاصيل> ، وسيكون لها عناصر طفل ، بما في ذلك عناصر <DT> و <dd>.
لمزيد من المعلومات حول HTML5 ، يرجى الرجوع إلى هذه المقالة حول تكشف Taobao Kongyan HTML5 و CSS3 [Baibiao Milk Tea Gang]. بالإضافة إلى ذلك ، يمكنك أيضًا النقر هنا لعرض PPT عبر الإنترنت.
3. اختلافات المتصفحفيما يلي بعض الاختلافات الشائعة والواضحة للمتصفح.
1. بعد إضافة العرض: كتلة لإدراج العناصربموجب Internet Explorer 8 و Opera 9 و Chrome و Firefox 2 & 3 و Safari ، فإن إضافة العرض: سوف يتسبب Block في اختفاء عدد عناصر LI في قائمة مرتبة أو غير مرتبة.
ولكن بموجب IE6 و IE7 ، إضافة الشاشة: لا تزال BLOCK BULLET موجودة:
الصفحة التجريبية
2. أضف العائم: اليسار لسرد العناصربموجب IE6 و IE7 ، فإن إضافة تعويم: سيُترك لسرد العناصر (بدون أنماط أخرى) سيجعل عناصر القائمة محاذاة أفقياً بينما تختفي الرصاص (أو رقم البند). كما هو موضح في الشكل أدناه ، يتم قطعه من متصفح IE7
بموجب IE8 وجميع المتصفحات الأخرى ، يتم محاذاة عناصر القائمة أفقياً ، لكن الرصاص (أو أرقام المشروع) لا تزال مرئية.
الصفحة التجريبية
عندما يطفو عنصر القائمة ، يجب أن نتذكر نقطة رئيسية أخرى ، أي أن حاوية القائمة (عنصر UL) سوف تموت عندما يكون هناك عناصر عائمة فقط في الداخل. سيحدث هذا بنفس الطريقة في جميع المتصفحات. إضافة الفائض: Hidden هو أحد الحلول لهذه المشكلة.
من أجل تحقيق ما يقرب من نفس العائمة: التأثير الأيسر في متصفحات مختلفة ، فإن أفضل طريقة هي استخدام العرض: مضمّن.
3. هناك قائمة مرتبة من التصميم تحت أيبموجب IE6 و IE7 ، إذا كان عنصر القائمة في القائمة المطلوبة يحتوي على تخطيط ، فلن تزيد قيمة القائمة المطلوبة وسيتم عرضها على أنها 1 ، كما هو موضح في الشكل أدناه:
الصفحة التجريبية
لا يمكن ضبط خاصية Haslayout مباشرة ، ولكن إذا تم تعيين عنصر على العرض ، والارتفاع ، العائم ، تحديد المواقع المطلقة ، سيتغير الانتظار.
4. الحشو والهامش تحت IE6 و IE7في معظم المتصفحات ، من أجل إزالة الرصاص أو أرقام المشروع ومواءمة الجانب الأيسر من المحتوى ، تحتاج إلى ضبط الحشو الأيسر على 0 ، ولكن هذا لا يعمل في IE6 و IE7. في IE6 و 7 ، تحتاج إلى ضبط الهامش الأيسر على 0 واستبداله. انظر الصورة أدناه:
الصفحة التجريبية
5. تنفيذ أنماط قائمة متسقة في المتصفحلتجنب المشاكل عند التعامل مع أنماط القائمة تحت متصفحات مختلفة ، فإن أفضل طريقة هي استخدام إعادة تعيين CSS المذكورة أعلاه. يمكن لإعادة ضبط CSS تعيين جميع الاختلافات الافتراضية تقريبًا في المتصفح والسماح لجميع المتصفحات بالعمل على نفس الأساس. على الرغم من أنه لا تزال هناك اختلافات في بعض الأنماط ، إلا أنها لن تعامل كنقطة صعبة.
أيضًا ، كما ذكرنا سابقًا ، من الأفضل تجنب استخدام خاصية الصورة على غرار القائمة تمامًا ، وبدلاً من ذلك ، قم بتعيين الخلفية بدلاً من ذلك ، وهو حل رمزي مخصص للقوائم غير المرتبة التي سهلة الطالبة.
4. بعض الأمثلة والتطبيقات 1. شريط الملاحةإلى حد بعيد ، فإن الاستخدام الأكثر شيوعًا للقوائم غير المرتبة هو قضبان التنقل ، سواء كانت أفقية أو رأسية. نظرًا لأن التخطيطات المستندة إلى الجدول أصبحت قديمة ، فقد تم استخدام قوائم غير مرتبة على نطاق واسع كأساس لعناصر التنقل ، للأسباب التالية:
• القوائم غير المرتبة تنتمي إلى عناصر مستوى الكتلة ولا تحتاج إلى لف div في الخارج لتطبيق الخلفية أو الإضافات الرسومية الأخرى.
• عندما يتم تعطيل النمط ، سيتم تخفيض نمط القائمة بهدوء ، مع الحفاظ على نمطه الأصلي ، والذي يمكن أن يضمن أن عناصر التنقل تختلف عن محتويات أخرى في الصفحة.
• على الرغم من أن القائمة غير المرتبة ليست مجرد قائمة بسيطة ، فإن إضافة عناصر مثل علامات <a> ، فإن عناصر <li> إضافية ستجعل شريط الملاحة Express في شكل أكثر مرونة.
• ينقسم التنقل إلى قوائم و/أو قوانين فرعية ، مما يتيح استخدام التقنيات المساعدة (مثل قراء الشاشة) التي يمكن للمستخدمين تخطي شريط التنقل بأكمله بسهولة.
على سبيل المثال: قائمة التأثير الخاص Lavalamp تم تنفيذها باستخدام jQuery
2. سحب القائمة لأسفلعلى سبيل المثال ، مثال على القائمة المنسدلة التي قمت بها منذ بعض الوقت: يستخدم jQuery Slidetoggle لتنفيذ القائمة المنسدلة الرأسية
التأثير التجريبي
3. عرض الصورHTML LIST TAG UL ، LI يوفر طريقة فعالة لعرض قائمة صور لنفس الأسباب المذكورة أعلاه في شريط التنقل. فيما يلي بعض معارض الصور أو مكونات عرض الصور على أساس علامات HTML.
jCarousel
يوفر مكون الإرسال jQuery لتبديل صور JCarousel وظائف jQuery قابلة للتخصيص ، باستخدام قوائم غير مرتبة ، ويمكنها عرض تأثيرات الإرسال بعدة طرق مختلفة. لقد قمت بترجمة هذا البرنامج المساعد إلى صيني ، يمكنك النقر هنا بقسوة: الصفحة الرئيسية لـ JCarousel الصينية
innerfade - jQuery
يمكن أن يمكّن المكون الإضافي Innerfade أي محتوى من نموذج القائمة من التلاشي والخارج للتبديل ، أو للتبديل لأعلى ولأسفل. يمكن أن يكون المحتوى نصًا وصورًا وما إلى ذلك يدعم علامات مختلفة وعلامات قائمة و UL و LI و DIV و P.
يمكن أن يدرك بسهولة عرض التبديل العشوائي التلقائي للأخبار أو محتوى الإعلان ، أو عرض عرض عروض شرائح الصور ، وما إلى ذلك. يوضح الشكل التالي مرحلة انتقالية لتبديل شريحة الصورة:
من الصعب النقر هنا على عرض العرض التوضيحي المكون الإضافي هنا: صفحة العرض التوضيحي الداخلي
4. تم تسليط الضوء على الرمزتحتوي العديد من المدونات والمواقع التعليمية على رمز تسليط الضوء على JavaScript التي تقوم بتحويل العناصر المسبقة أو عناصر TextArea إلى قوائم مرتبة ، كما هو موضح في لقطة الشاشة التالية. أحد الإضافات الشهيرة التي تسلط الضوء على الرمز الشهير هي SyntaxHighlighter's Alex Gorbatchev.
فيما يلي لقطة شاشة للتأثير المشابه للمكون الإضافي المميز:
يمكنك النقر هنا لمعاينة التأثير (تعرض الصفحة التجريبية رمز المكونات الإضافية لملفات تعريف الارتباط jQuery).
5. تعليقات المدونةتم تصميم تعليقات المدونة ، بما في ذلك هذه المواقع التي تعتمد على WordPress ، في القوائم المطلوبة ، وتوفر خيارات تصفيف مرنة للغاية ووضع الأساس لتداخل التعليقات. الصورة التالية هي لقطة شاشة من قسم التعليقات من قصة Mr.Gray - Depale Design Design Gray 8 Applications التي أصدرتها Tencent Cdc TD أمس.
6. قائمة المنتجالممثل الأكثر نموذجية هو عرض آلاف فئات المنتجات في عمود فئة الطفل في صفحة Taobao الرئيسية:
كما يتضح من لقطة الشاشة ، يتم عرض الغرض من هذه الفئة باستخدام قائمة تعريف DL و DT و DD.
7. آخرونهناك العديد من التطبيقات الأخرى لعناصر القائمة ، مثل أشرطة التقدم للتحميلات متعددة الصور ، وقوائم خطوة CSS ، والقوائم المتداخلة ، وما إلى ذلك. لن أريهم واحدًا تلو الآخر هنا.
5. ملخص يمكن الاستغناء عنهعناصر علامات HTML هي الطوب والبلاط ، والتي تبدو عادية للغاية ، ولكن عندما يتعلق الأمر بالمصممين الممتازين والعمال الممتازين ، فإنهم سيمارسون إمكاناتهم وسحرهم اللانهائي ، لذلك لدينا إنترنت ملون. وينطبق الشيء نفسه على عناصر القائمة. على الرغم من أن هناك العشرات من الاستخدامات والتقنيات التي يجب مناقشتها في هذه المقالة ، فإن بعض الأشياء الموضحة في هذه المقالة ستمنحنا فهمًا شاملاً لمحة عامة لعناصر العلامات في HTML ، مما يساعدك على بناء مباني إنترنت جميلة مع الطوب مثل القوائم.
6. القراءة المرجعية والقراءة الموسعة• Listamatic
• تصميم CSS: قوائم ترويض
• قوائم CSS على W3Schools
• قوائم التعريف - إساءة استخدام أو إساءة فهمها؟
• القوائم المصممة على طراز CSS: 20+ عروض تجريبية ودروس وأفضل الممارسات
• قائمة عناصر على مرجع HTML من SitePoint