كيفية تصميم الخط الزمني العمودي سريع الاستجابة باستخدام HTML و CSS فقط

ستتعلم اليوم في هذا كيفية إنشاء تصميم مخطط زمني عمودي متجاوب بالكامل باستخدام HTML و CSS فقط

مرحبًا أيها الأصدقاء ، ستتعلم اليوم في هذا كيفية إنشاء تصميم مخطط زمني عمودي متجاوب بالكامل باستخدام HTML و CSS فقط.

 

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

 

في تصميم المخطط الزمني العمودي ، كما ترى في صورة المعاينة ، يوجد مخطط زمني عمودي حيث أظهرنا بشكل مثالي العنوان والوصف والتاريخ واسم الكاتب لحدث معين. يوجد في وسط التصميم خط عمودي أبيض به أيقونات ، ويشير كل رمز إلى الحدث المرتبط به ويوجد إجمالي ستة أحداث ولكن يمكنك بسهولة إضافة المزيد.

 

في آخر الجدول الزمني ، يوجد رمز التمرير لأعلى بحيث يمكنك الوصول بسهولة إلى أعلى الصفحة بمجرد النقر على هذا الرمز. أفضل الأشياء في هذا المخطط الزمني سريعة الاستجابة ، متوافقة مع الجوّال ، ويتم إنشاؤها باستخدام HTML و CSS فقط.

 

في الفيديو التعليمي ، لقد رأيت جدولنا الزمني العمودي واستجابته. لقد أخبرتك بالفعل أن هذا برنامج CSS خالص ، لذا إذا كنت مبتدئًا في تصميم الويب ، فيمكنك أيضًا فهم رموز هذا التصميم بسهولة ويمكنك أيضًا إنشاء هذا النوع من المخطط الزمني أو أي شيء آخر.

 

لإنشاء هذا المخطط الزمني وجعله سريع الاستجابة ، استخدمت خاصية CSS flexbox ويمكنك أيضًا إنشاء هذا المخطط الزمني باستخدام float - left / right ولكن هذه طريقة تصميم قديمة ولا يستخدمها أحد في الوقت الحاضر لأنه باستخدام flexbox يمكننا بسهولة محاذاة عنصر .

 

تصميم الخط الزمني العمودي سريع الاستجابة

لإنشاء هذا البرنامج [Vertical Timeline Design]. أولاً ، تحتاج إلى إنشاء ملفين ، أحدهما ملف HTML والآخر هو ملف CSS. بعد إنشاء هذه الملفات ، قم فقط بلصق الرموز التالية في ملفك. يمكنك أيضًا تنزيل ملفات التعليمات البرمجية المصدر لتصميم المخطط الزمني هذا من زر التنزيل أدناه.

الملفات

ما هو رد فعلك؟

like

dislike

love

funny

angry

sad

wow