كيفية تنفيذ تسميات الزاوية المستديرة القابلة للتوسيع

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

الشكل 1:

كما هو موضح في الشكل 1، تختلف حافة الملصق الدائري عن لون الخلفية. أولاً، نحتاج إلى إنشاء صورة خلفية في الفوتوشوب (الشكل 2)، ويكون عرض الصورة أكبر قليلاً من طول النص المحتمل الارتفاع يساوي على الأقل الملصق الفعلي، ويتم ضبط الحافة على لون الحد، ويكون الجزء الداخلي شفافًا، ولكن لا يمكن ضبط المنطقة الواقعة خارج الزوايا الدائرية على شفافة ويجب ملؤها بلون خلفية الصفحة. هنا، يتم استخدام اللون الأبيض، ونطلق عليه اسم tab_bg.gif.

الشكل 2

الكود كما يلي:

1. فكرة التنفيذ هي تعيين الخلفية اليمنى للملصق للعلامة <a>، وتعيين الخلفية اليسرى للملصق للعلامة <span> لتحقيق توسيع الملصق المستدير؛

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

الشكل 3

 

في الحالة المذكورة أعلاه، نظرًا لضرورة تحقيق تأثير الحد، لا يمكن توسيع النص إلا ضمن عرض الخلفية، وهو ما له قيود معينة. إذا كانت تسمية زاوية مستديرة ذات لون واحد، فيمكن توسيعها بالكامل (الشكل 4).

الشكل 4

قم بقص الجانبين الأيسر والأيمن من صورة الخلفية المستخدمة لأول مرة في صور الخلفية على التوالي (كما هو موضح في الشكل 5)، وقم بتسميتها tab_left.gif وtab_right.gif.

الشكل 5

الكود كما يلي:

وصف الكود:

1. استخدم خلفيات مختلفة لـ <a> و<span>، واضبط لون خلفية الارتباط على لون الحد لتحقيق تأثير تسمية أحادي اللون؛

2. هذه الطريقة يمكن أن تحقق تأثيرات التوسع التعسفي.