عند إنشاء صفحات الويب، من الشائع جدًا استخدام العلامات للعرض المصنف. تتميز علامات الزاوية المستديرة بمزايا الأسلوب الجميل والتعبير الحيوي. بشكل عام، سنحول خلفية علامة الزاوية المستديرة إلى صورة هذا إذا تغير عدد الكلمات في نص التسمية (كما هو موضح في الشكل 1)، فلا يمكن توسيع صورة الخلفية الثابتة وفقًا لذلك. بهذه الطريقة، نحتاج إلى إنشاء العديد من صور الخلفية بعروض مختلفة، وهو أمر غير مريح للغاية. فيما يلي طريقتان لإنشاء ملصقات ذات زوايا مستديرة قابلة للتوسيع.
الشكل 1
تسميات مدورة السكتة الدماغية
كما هو موضح في الشكل 1، تختلف حافة الملصق الدائري عن لون الخلفية. أولاً، نحتاج إلى إنشاء صورة خلفية في الفوتوشوب (الشكل 2)، ويكون عرض الصورة أكبر قليلاً من طول النص المحتمل الارتفاع يساوي على الأقل التسمية الفعلية، ويتم ضبط الحافة على لون الحد، ويكون الجزء الداخلي شفافًا، ولكن لا يمكن ضبط المنطقة الواقعة خارج الزوايا الدائرية على شفافة ويجب ملؤها بلون خلفية الصفحة. هنا، يتم استخدام اللون الأبيض، ونطلق عليه اسم tab_bg.gif.
الشكل 2
الرمز هو كما يلي:
| هنا اقتباس: <نمط النوع = "نص/CSS"> a.tab{ float:left; Margin:10px; a.tabspan{ padding-left:10px الخلفية:url(tab_bg.gif) عرض بدون تكرار:block;} </نمط> <body bgcolor="#FFFFFF"> <a href="#" class="tab"><span>الصفحة الرئيسية</span></a> <a href="#" class="tab"><span>الملف الشخصي</span></a> <a href="#" class="tab"><span>سجل الزوار</span></a> </الجسم> |
وصف الكود:
1. تتمثل فكرة التنفيذ في تعيين الخلفية اليمنى للملصق للعلامة <a>، وتعيين الخلفية اليسرى للملصق للعلامة <span> لتحقيق توسيع تسمية الزاوية المستديرة؛
2. لا تتطلب هذه الطريقة سوى تنزيل صورة خلفية، مما يحل مشكلة عرض الخلفية غير المتزامنة على جانبي الملصق، ومع ذلك، إذا تجاوز عدد الكلمات في الملصق عرض صورة الخلفية، فستحدث المشاكل تحدث (كما هو موضح في الشكل 3)، لذلك عند إنشاء صورة خلفية، يجب أن يأخذ عرض الصورة في الاعتبار أطول عرض للأحرف قدر الإمكان.
الشكل 3
ملصق ذو زوايا مستديرة بلون خالص
في الحالة المذكورة أعلاه، نظرًا لضرورة تحقيق تأثير الحد، لا يمكن توسيع النص إلا ضمن عرض الخلفية، وهو ما له قيود معينة. إذا كانت تسمية زاوية مستديرة ذات لون واحد، فيمكن توسيعها بالكامل (الشكل 4).
الشكل 4
قم بقص الجانبين الأيسر والأيمن من صورة الخلفية المستخدمة لأول مرة في صور الخلفية على التوالي (كما هو موضح في الشكل 5)، وقم بتسميتها tab_left.gif وtab_right.gif.
الشكل 5
الرمز هو كما يلي:
| هنا اقتباس: <نمط النوع = "نص/CSS"> a.tab{ float:left; Margin:10px; a.tabspan{ padding-left:10px الخلفية:url(tab_left.gif) عرض بدون تكرار:block;} </نمط> <body bgcolor="#FFFFFF"> <a href="#" class="tab"><span>الصفحة الرئيسية</span></a> <a href="#" class="tab"><span>الملف الشخصي</span></a> <a href="#" class="tab"><span>سجل الزوار</span></a> </الجسم> |
وصف الكود:
1. استخدم خلفيات مختلفة لـ <a> و<span>، واضبط لون خلفية الارتباط على لون الحد لتحقيق تأثير تسمية أحادي اللون؛
2. هذه الطريقة يمكن أن تحقق تأثيرات التوسع التعسفي.