يعد إنشاء بطاقات فعالة وسهلة الاستخدام مهمة مهمة عند تطوير مواقع الويب. ومع ذلك ، يواجه بعض المطورين مشكلة عندما يكون من الضروري إنشاء بطاقات أفقية سيتم عرضها على نفس السطر بدون فواصل أسطر.
في هذا الدليل التفصيلي ، سننظر في كيفية إنشاء بطاقات أفقية باستخدام كس. سوف نعرض لك العديد من التقنيات والخصائص التي ستساعدك على تحقيق النتيجة المرجوة.
لإنشاء بطاقات أفقية في كس ، سنحتاج إلى بعض المعرفة الأساسية للعمل مع عناصر الكتلة وتحديد المواقع. سننظر أيضا في أمثلة التعليمات البرمجية ونحلل كل خطوة بالتفصيل.
- المبادئ الأساسية
- ترميز هتمل
- التصميم عبر كس
- أنواع المحتوى
- القدرة على التكيف
- تأثيرات إضافية
- سؤال وجواب
- ما هي الأدوات التي يجب استخدامها لإنشاء بطاقات أفقية في المغلق?
- كيف يمكنني استخدام فليكسبوكس لإنشاء بطاقات أفقية?
- كيف يمكنني استخدام الشبكة لإنشاء بطاقات أفقية?
- هل من الممكن إنشاء بطاقات أفقية دون استخدام المغلق?
- كيف يمكنني جعل بطاقات أفقية من أحجام مختلفة?
- كيف يمكنني إضافة هوامش بين بطاقات أفقية?
المبادئ الأساسية
لإنشاء بطاقات أفقية في كس ، سوف نستخدم العرض: مضمنة كتلة الملكية. تسمح لنا هذه الخاصية بإنشاء عناصر كتلة مرتبة أفقيا ، بدلا من رأسيا ، كالمعتاد.
فيما يلي الخطوات الأساسية التي تحتاج إلى اتباعها لإنشاء بطاقات أفقية:
- إنشاء حاوية للبطاقات باستخدام العلامة
- قم بتعطيل الهوامش والهوامش لعناصر القائمة بحيث لا تظهر عموديا أسفل بعضها البعض.
- تعيين العرض: خاصية كتلة مضمنة لعناصر القائمة بحيث يتم وضعها أفقيا.
- اختياريا ، قم بمحاذاة عناصر القائمة أفقيا باستخدام خاصية محاذاة النص للحاوية.
- لإضافة أنماط وبطاقات منفصلة ، استخدم خصائص كس مثل الحشو ، الهامش ، الحدود ، إلخ.
هنا مثال على التعليمات البرمجية التي تنفذ كل هذه الخطوات:
بطاقة 1
بطاقة 2
بطاقة 3
وهنا مثال على كس الذي يضيف أنماط وفصل البطاقة:
.أفقي-بطاقات {
نمط القائمة: لا شيء;
الهامش: 0;
الحشو: 0;
محاذاة النص: المركز;
}
.بطاقة {
عرض: مضمنة كتلة;
العرض: 200 بكسل;
الارتفاع: 200 بكسل;
الهامش: 10 بكسل;
الحشو: 10 بكسل;
الحدود: 1 بكسل أسود صلب;
}
سيقوم هذا المثال بإنشاء بطاقات أفقية بعرض 200 بكسل وارتفاع 200 بكسل. سيتم وضع البطاقات أفقيا وسيكون لها حدود سوداء.
يمكنك تغيير قيم الخصائص مثل العرض والارتفاع والهوامش والحدود لتحقيق التأثير المرئي الذي تحتاجه. ضع في اعتبارك أن عدد البطاقات في الحاوية يمكن أن يؤثر على مظهرها ، بحيث يمكنك ضبط قيم الخصائص لتحقيق النتيجة المرجوة.
ترميز هتمل
ترميز هتمل هو الأساس لإنشاء بطاقات أفقية في كس. باستخدام علامات وسمات هتمل ، يمكنك تحديد هيكل ومحتوى البطاقات.
لإنشاء بطاقات أفقية ، العناصر
مثال على وضع علامة على بطاقة أفقية:
في هذا المثال ، يتم إنشاء قائمة بعنصر واحد
إذا كنت ترغب في عرض عدة بطاقات أفقيا ، يمكنك إضافة عدة عناصر
في هذا المثال ، يتم إنشاء قائمة مع عنصرين
يمكن أن يكون هناك العديد من الخيارات لوضع علامات على البطاقات. على سبيل المثال ، يمكنك استخدام الجداول لإنشاء بطاقات أفقية. ومع ذلك ، فإن استخدام العناصر
التصميم عبر كس
أحد المبادئ الأساسية لتصميم صفحة ويب باستخدام كس هو تطبيق الأنماط على عناصر هتمل باستخدام محددات.
تتيح لك المحددات تحديد عناصر الصفحة لتطبيق أنماط معينة عليها. على سبيل المثال ، يسمح لك محدد المعرف بتحديد عنصر بواسطة معرفه الفريد:
# بلدي عنصر {
اللون: أحمر;
}
باستخدام محدد الفئة ، يمكنك تحديد جميع العناصر مع فئة معينة:
. صفي {
حجم الخط: 18 بكسل;
لون الخلفية: أصفر;
}
يمكن تعيين الأنماط داخل ملف هتمل وملف كس خارجي. يمكن تعيين الأنماط داخل ملف هتمل باستخدام علامة:
يمكن تعيين الأنماط في ملف كس خارجي في ملف منفصل بالمحتويات التالية:
ص {
اللون: أزرق;
}
يتم استخدام العلامة لتوصيل ملف كس خارجي إلى صفحة هتمل :