مدونة التربية و التعليم في الجزائر – دروس، فروض، نتائج امتحانات مدونة التربية والتعليم في الجزائر | تحضير الدروس، فروض واختبارات، نتائج البكالوريا وBEM، مسابقات التوظيف، والتوجيه المدرسي للطلاب وأولياء الأمور.
مقدمة
في هذا الدرس سنتعرف على CSS3: Flexbox و Grid للتنسيق المتقدم في مادة الإعلام الآلي لتلاميذ السنة الرابعة متوسط.
الشرح النظري
CSS: لغة تنسيق صفحات الويب. Flexbox: نظام توزيع مرن للعناصر في اتجاه واحد (أفقي أو عمودي). الخصائص: display:flex, justify-content, align-items, flex-direction. Grid: نظام توزيع ثنائي الأبعاد (صفوف وأعمدة). الخصائص: display:grid, grid-template-columns, grid-gap. CSS3 يضيف: animations, transitions, shadows, gradients, responsive design.
مثال توضيحي
Flexbox: display:flex; justify-content:center; align-items:center توسيط المحتوى. Grid: grid-template-columns: 1fr 1fr 1fr; ثلاث أعمدة متساوية.
تمرين تطبيقي
أنشئ صفحة تحتوي على 4 مربعات ملونة مرتبة باستخدام Flexbox في صف واحد. ثم أنشئ شبكة 3×3 باستخدام Grid.
خلاصة
Flexbox: توزيع مرن أحادي الاتجاه. Grid: توزيع ثنائي الأبعاد. CSS3: Animations, Shadows, Transitions.