مقدمة عن الدرس

مواضيع الدرس

• إنشاء صندوق يحتوي على صورة ونص بجانب بعضهما.


• استخدام float لتثبيت الصورة جهة اليسار والنص بعرض كامل.


• تخصيص نمط خاص لعناصر محددة باستخدام DOM واختيار nth-of-type.


• محاذاة الصور إلى المنتصف باستخدام margin في حال عدم استخدام float.


• استخدام display: table لعناصر مخصصة لتحقيق تصميم فريد.

تطبيق عملي

1. قم بإنشاء ثلاث عناصر داخل عنصر div رئيسي:
   
   
   
   • العنصر الأول: صورة جهة اليسار والنص جهة اليمين.
   
   
   • العنصر الثاني: صورة ونص في وسط الصفحة باستخدام display: table.
   
   
   • العنصر الثالث: صورة جهة اليمين والنص جهة اليسار.
   
   
   
   


2. استخدم خاصية nth-of-type(2) لتطبيق النمط الخاص على العنصر الثاني.


3. قم بمحاذاة الصورة باستخدام margin: 0 auto عند الحاجة.

لماذا تختار هذه الدورة؟