غالبا ما تكون الأزرار عنصرا مهما في تصميم صفحة الويب. يتم استخدامها لتنفيذ إجراءات مختلفة ، مثل إرسال نموذج أو الانتقال إلى صفحة أخرى أو تنشيط ميزة معينة. ومع ذلك ، في بعض الأحيان لا يتوافق الموضع القياسي للزر مع التصميم المقصود.
في هذه المقالة ، سنلقي نظرة على 5 طرق بسيطة لتغيير موضع زر في هتمل دون استخدام الأنماط. ستسمح لك هذه الطرق بإنشاء تصميمات فريدة وجذابة لصفحات الويب ، بالإضافة إلى جعل الزر أكثر سهولة في الاستخدام.
1. باستخدام علامة المحاذاة
أسهل طريقة لتغيير موضع الزر هي استخدام سمة المحاذاة داخل علامة الزر. على سبيل المثال ، لمحاذاة الزر إلى وسط الصفحة ، يمكنك استخدام التعليمات البرمجية التالية:
زر
2. باستخدام علامة الجدول
إذا كنت لا تحب استخدام سمة المحاذاة ، فيمكنك تنظيم الزر داخل الجدول باستخدام علامة الجدول. على سبيل المثال:
باستخدام علامة الجدول ، يمكنك بسهولة التحكم في موضع الزر في الصفحة.
- باستخدام سمة "النمط"
- باستخدام فئة كس
- باستخدام ملف كس خارجي
- باستخدام خاصية كس "الموقف"
- باستخدام إطار كس
- سؤال وجواب
- كيف يمكنني تغيير موقف زر باستخدام المغلق?
- كيف يمكنني تغيير موضع الزر باستخدام الأنماط المضمنة?
باستخدام سمة "النمط"
بالإضافة إلى خصائص كس المضمنة ، يمكنك أيضا استخدام سمة "نمط" لتغيير موضع الزر في هتمل. تسمح لك سمة" النمط " بتطبيق خصائص كس مباشرة على عنصر.
على سبيل المثال ، يمكنك استخدام خاصية" الموضع " مع "اليسار" و "الأعلى" لنقل الزر إلى الموقع المطلوب في الصفحة:
زر
في هذا المثال ، سيكون الزر موجودا على بعد 100 بكسل من الحافة اليسرى و 50 بكسل من الحافة العلوية.
أيضا ، يمكنك استخدام خاصية "تعويم" لمحاذاة الزر مع عناصر أخرى على الصفحة.:
زر
في هذه الحالة ، سيتم تحويل الزر إلى اليمين والضغط على الحافة اليمنى للكتلة التي يقع فيها.
يمكنك أيضا استخدام خصائص" الهامش "و" الحشو " لتغيير هوامش الزر من العناصر الأخرى في الصفحة:
زر
في هذا المثال ، سيكون للزر مسافة بادئة على يسار 20 بكسل ومسافة بادئة أعلى 10 بكسل.
باستخدام سمة" النمط " ، يمكنك تغيير موضع الزر بسرعة وسهولة دون الحاجة إلى إنشاء ملف كس منفصل.
باستخدام فئة كس
طريقة أخرى لتغيير موقف زر في هتمل هو استخدام فئة كس. تسمح لك الفصول بتطبيق الأنماط على العناصر والتحكم في موقعها.
أولا ، دعنا نحدد فئة للزر. في رمز هتمل ، يجب وضع الزر بين علامتي الفتح والإغلاق وإعطاء معرف فريد ، على سبيل المثال.
ثم ، في ملف كس أو داخل العلامة
внутри тега, мы можем добавить стили для этого класса. Например, мы можем использовать свойство "position" для задания позиции кнопки:.زر-موقف {
موضع: مطلق;
أعلى: 100 بكسل;
على اليمين: 50 بكسل;
}
لتطبيق هذه الفئة على زر ، تحتاج إلى إضافة سمة" الفئة " في العلامة باسم الفئة التي حددناها. على سبيل المثال:
زر
الآن سيتم وضع الزر تماما على الصفحة ، على مسافة 100 بكسل من الأعلى و 50 بكسل من اليمين.
باستخدام فئة كس يمنحك المزيد من الحرية للسيطرة على أنماط وموقف الزر. يمكنك تحديد فئات متعددة وتطبيقها على عناصر مختلفة على الصفحة. يتيح لك الجمع بين الفئات أيضا إنشاء ترتيبات معقدة وتغيير أنماط العناصر اعتمادا على السياق.
باستخدام ملف كس خارجي
طريقة أخرى لتغيير موقف زر في هتمل هو استخدام ملف كس خارجي. يسمح لك ملف كس الخارجي بفصل الأنماط عن شفرة هتمل ، مما يجعلها أكثر قابلية للقراءة وسهلة الصيانة.
لاستخدام ملف كس خارجي ، تحتاج إلى إنشاء ملف جديد مع التمديد.كس وتوصيله إلى صفحة هتمل باستخدام علامة.
مثال على توصيل ملف كس خارجي:
- إنشاء ملف جديد مع التمديد.المغلق ، على سبيل المثال " الأنماط.المغلق".
- افتح " الأنماط.المغلق " ملف في محرر نصوص وإضافة الأنماط اللازمة للزر. على سبيل المثال ، لتغيير موضع الزر ، يمكنك استخدام خاصية "الموضع" بالقيمة المناسبة (على سبيل المثال ، "نسبي" ، "مطلق" ، "ثابت").
- احفظ " الأنماط.المغلق " ملف.
- افتح ملف هتمل الذي تريد إضافة الزر إليه.
- داخل القسم ، أضف العنصر التالي لتوصيل ملف كس خارجي:
أين:
- ريل= "ورقة الأنماط" - يشير إلى أن الملف هو ملف كس.
- اكتب= "نص / كس" - يشير إلى نوع محتوى الملف (كس).
- هريف="الأنماط.كس " - يحدد المسار إلى ملف الأنماط. هنا تحتاج إلى تحديد المسار الصحيح إلى "الأنماط" التي تم إنشاؤها مسبقا.المغلق " ملف.
الآن سيتم تطبيق جميع الأنماط من ملف كس الخارجي على عناصر هتمل على الصفحة ، بما في ذلك الزر ، ويمكنك تغييرها كما يحلو لك.
باستخدام خاصية كس "الموقف"
في هتمل ، يمكنك استخدام خاصية كس" الموقف " لتغيير موضع زر أو أي عنصر آخر على صفحة ويب. تتيح لك هذه الخاصية تحديد نوع موضع العنصر وتعيين موضعه على الصفحة.
هناك العديد من قيم خاصية كس "الموضع" التي يمكنك تطبيقها على العنصر:
- مطلق: عند تعيين القيمة إلى "مطلق" ، سيتم وضع العنصر بالنسبة إلى أقرب عنصر أصل مع سمة" الموضع "التي لا تساوي" ثابت " ، أو بالنسبة إلى نافذة المتصفح نفسها ، إذا لم يتم العثور على مثل هذا العنصر.
- ثابت: عند التعيين على" ثابت " ، سيتم وضع العنصر بالنسبة لنافذة المتصفح وسيظل في مكانه حتى عند التمرير في الصفحة.
- نسبي: عند تعيين القيمة إلى "نسبي" ، سيتم وضع العنصر بالنسبة إلى موضعه الأصلي.
- ثابت (القيمة الافتراضية): سيتم وضع العنصر في المستند بالطريقة المعتادة ولن يتم تغيير موضعه باستخدام خاصية كس"الموضع".
لتعيين إحداثيات محددة لعنصر ما ، يمكنك استخدام خصائص كس "أعلى" و "أسفل" و "يسار" و "يمين". على سبيل المثال ، يمكنك استخدام رمز كس التالي لتغيير موضع الزر:
| أعلى: 50 بكسل; |
اليسار: 100 بكسل;
- }
- في هذا المثال ، سيتم وضع زر مع فئة "الزر" على بعد 50 بكسل من الحافة العلوية و 100 بكسل من الحافة اليسرى للعنصر الأصل. يمكنك تغيير القيم لتحقيق الموضع المطلوب للعنصر.
- باستخدام إطار كس
- لإنشاء صفحات ويب أنيقة وحديثة بسرعة وكفاءة ، غالبا ما يلجأ المطورون إلى استخدام أطر كس. إطار كس هو مجموعة من الأساليب والمكونات الجاهزة التي تسمح لك لتسريع عملية التخطيط وتبسيط إنشاء تصاميم استجابة. دعونا ننظر في خمس مزايا هامة لاستخدام إطار كس:
تقليل وقت التطوير: يوفر إطار كس أنماط ومكونات جاهزة ، مما يقلل بشكل كبير من الوقت لإنشاء الأنماط والعناصر الخاصة بك.
تصميم موحد: تقدم الأطر مجموعة واحدة من الأنماط والمكونات ، مما يسمح لك بإنشاء تصميم موحد وحديث للموقع بأكمله.
القدرة على التكيف: توفر معظم أطر كس أدوات لإنشاء تصميمات سريعة الاستجابة تتكيف بسهولة مع دقة شاشة الجهاز المختلفة.
صحيح
,
كيف يمكنني تغيير موضع الزر باستخدام الأنماط المضمنة?