المغلق لإنشاء العين اصطياد قوائم

• أبريل 19, 2024

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

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

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

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

قائمة خصائص النمط

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

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

ul {list-style-image: url (imagename.jpg)؛
قائمة نمط الموقف: خارج.
}

عنوان url مرتبط بورقة الأنماط ويجب أن يشير إلى المجلد الذي توجد فيه صورتك. في هذه الحالة ، ستكون الصورة في نفس المجلد مثل ملف css و html. إذا وضعت صورك في مجلد منفصل ، فستضمّن ذلك أيضًا: url (images / imagename.jpg)

مواقف ماركر

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

تقنية الاختزال

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

المجاهدين
{
نمط القائمة: circle url ("image.gif") ؛
}

في طريقة الاختزال ، يجب أن تظهر جميع القيم بترتيب محدد كما يلي:

قائمة النمط من نوع
قائمة نمط الموقف (من الداخل والخارج)
قائمة غرار صورة

لا يهم إذا تخطيت قيمة ، طالما بقيت الآخرين في الترتيب الصحيح.

قوائم مخصصة مفيدة للغاية و CSS يجعلها سهلة لتحقيق. تحول التفاصيل البسيطة مواقع الويب المتوسطة إلى مواقع ويب عالية الأداء.

تعليمات الفيديو: د. سعيد الدبس - الفرق بين الكيس الدهني والورم الدهني الحميد والفرط الدهني - طب وصحة (أبريل 2024).