لإضافة خطوط أفقية ذات نمط فاصل إلى مواقع الويب الخاصة بك ، يتضمن أحد الخيارات إضافة ملفات صور لتلك الخطوط إليها صفحتك ، ولكن هذا قد يتطلب من متصفحك استرداد هذه الملفات وتحميلها ، مما قد يكون له تأثير سلبي على أداء الموقع. يمكنك أيضًا استخدام ملف CSS خاصية الحدود المراد إضافتها الحدود تعمل كخطوط في الجزء العلوي أو السفلي من عنصر ، مما يؤدي إلى إنشاء الخط الفاصل بشكل فعال.
أو - أفضل من ذلك - استخدم امتداد لغة البرمجة عنصر للقاعدة الأفقية.
عنصر القاعدة الأفقية
المظهر الافتراضي لخطوط التسطير الأفقية ليس مثاليًا. لجعلها تبدو أجمل ، أضف CSS لضبط المظهر المرئي لهذه العناصر لتتماشى مع الشكل الذي تريد أن يبدو عليه موقعك.
تعرض علامة الموارد البشرية الأساسية الطريقة التي يريد المتصفح عرضها بها. تعرض المتصفحات الحديثة عادةً علامات HR غير منظمة بعرض 100 بالمائة ، وارتفاع 2 بكسل ، وحد ثلاثي الأبعاد باللون الأسود لإنشاء الخط.
العرض والارتفاع متسقان عبر المستعرضات
الأنماط الوحيدة المتسقة عبر متصفحات الويب هي تنسيق العرض والأنماط. هذه تحدد حجم الخط. إذا لم تحدد العرض والارتفاع ، فسيكون العرض الافتراضي 100 بالمائة والارتفاع الافتراضي 2 بكسل.
في هذا المثال ، يكون العرض هو 50 بالمائة من العنصر الرئيسي (لاحظ أن هذه الأمثلة أدناه تتضمن جميعها أنماطًا مضمنة. في إعداد الإنتاج ، ستتم كتابة هذه الأنماط فعليًا في ورقة أنماط خارجية لسهولة الإدارة في جميع صفحاتك):
النمط = "العرض: 50٪ ؛">
وفي هذا المثال يكون الارتفاع 2em:
style = "height: 2em ؛">
قد يكون تغيير الحدود أمرًا صعبًا
في المتصفحات الحديثة ، يبني المستعرض الخط عن طريق ضبط الحدود. لذلك إذا قمت بإزالة الحد بخاصية النمط ، فسيختفي السطر على الصفحة. كما ترى (حسنًا ، لن ترى أي شيء ، لأن الخطوط ستكون غير مرئية) في هذا المثال:
style = "border: none؛">
يؤدي ضبط حجم الحدود ولونها ونمطها إلى جعل الخط يبدو مختلفًا وله نفس التأثير في جميع المتصفحات الحديثة. على سبيل المثال ، في هذا العرض التوضيحي ، تكون الحدود حمراء ومتقطعة وعرض 1 بكسل:
style = "border: 1px dashed # 000؛">
اصنع خطًا زخرفيًا مع صورة خلفية
بدلاً من اللون ، حدد صورة خلفية لقاعدتك الأفقية بحيث تبدو تمامًا كما تريدها ، ولكن لا تزال تظهر بشكل دلالي في العلامات الخاصة بك. في هذا المثال ، استخدمنا صورة مكونة من ثلاثة خطوط متموجة. من خلال تعيينه على أنه ملف الصورة الخلفية بدون تكرار ، فإنه يخلق فاصلًا في المحتوى يبدو تقريبًا كما تراه في الكتب:
النمط = "الارتفاع: 20 بكسل ؛ الخلفية: #fff url (aa010307.gif) مركز التمرير بدون تكرار ؛ الحدود: لا شيء ؛ ">
تحويل عناصر الموارد البشرية
باستخدام CSS3 ، يمكنك أيضًا جعل خطوطك أكثر تشويقًا. يعتبر عنصر الموارد البشرية تقليديًا أ عرضي الخط ، ولكن باستخدام خاصية تحويل CSS ، يمكنك تغيير شكلها. التحول المفضل في عنصر الموارد البشرية هو تغيير الدوران.
قم بتدوير عنصر الموارد البشرية الخاص بك بحيث يكون قطريًا قليلاً:
ساعة {
- تحويل الموز: تدوير (10 درجة) ؛
-webkit- تحويل: تدوير (10deg) ؛
-o-تحويل: تدوير (10deg) ؛
تحويل ms: تدوير (10deg) ؛
تحويل: تدوير (10deg) ؛
}
أو يمكنك تدويرها بحيث تكون رأسية تمامًا:
ساعة {
- تحويل موس: تدوير (90 درجة) ؛
-webkit- تحويل: تدوير (90 درجة) ؛
- تحويل: تدوير (90 درجة) ؛
تحويل ms: تدوير (90deg) ؛
تحويل: تدوير (90 درجة) ؛
}
تقوم هذه التقنية بتدوير الموارد البشرية بناءً على موقعها الحالي في المستند ، لذلك قد تحتاج إلى ضبط الوضع للوصول إلى المكان الذي تريده. لا ينصح باستخدام هذا لإضافة خطوط عمودية إلى تصميم ، ولكنه تأثير مثير للاهتمام.
طريقة أخرى للحصول على سطور في صفحاتك
أحد الأشياء التي يقوم بها بعض الأشخاص بدلاً من استخدام عنصر الموارد البشرية هو الاعتماد على حدود العناصر الأخرى. لكن في بعض الأحيان يكون استخدام الموارد البشرية أكثر ملاءمة وأسهل في الاستخدام من محاولة تعيين الحدود. يمكن أن تجعل مشكلات نموذج المربع لبعض المتصفحات إعداد الحدود أكثر صعوبة.