هذا الدرس من الدورة التدريبية: دورة تدريبية لغة CSS لإنشاء تصاميم وتنسيق صفحات الإنترنت
الدرس: تنسيق عناصر هيكل صفحة الويب بواسطة خاصية Float
المدة: 5 دقائق
وصف مختصر:
تعرف على خاصية Float في CSS واستخدمها لتحسين تخطيط صفحات الويب وإنشاء عناصر بجانب بعضها بسهولة. انضم لدورتنا واحصل على شهادة معتمدة.
وصف الدرس
تخطيط العناصر باستخدام خاصية Float في CSS
خاصية (Float) هي من أساسيات CSS وتساعدك على تصميم صفحات ويب منظمة وعصرية. تعلم كيفية استخدامها لإنشاء تخطيطات احترافية بسهولة!
ما هي خاصية Float في CSS؟
خاصية float تُستخدم لتحديد اتجاه عنصر معين داخل الحاوية الخاصة به. يمكن تعيينها إلى اليسار (
float: left;
) أو اليمين (float: right;
) لجعل العناصر بجانب بعضها البعض بدلاً من أن تكون تحت بعضها.كيفية استخدام Float لإنشاء أعمدة؟
لإنشاء أعمدة تحتوي على نصوص وصور بجانب بعضها:
- عين خاصية
float: left;
لكل عنصر داخلي. - حدد أقصى عرض لكل عنصر باستخدام
max-width: 30%;
. - استخدم خاصية
border
لتوضيح حدود العناصر وجعلها مرئية.
كود مثال:
.container {
display: flex;
flex-wrap: wrap;
}
.item {
float: left;
max-width: 30%;
border: 2px solid blue;
}
ضها البعض بدون CSS؟
فوائد تعلم خاصية Float
- تنظيم المحتوى في الأعمدة بسهولة.
- تصميم واجهات مرنة واحترافية.
- التعرف على أحد المفاهيم الأساسية لتصميم الويب.
الفيديوهات
سجل دخول وتأكد من اشتراكك في هذا البرنامج الدراسي للوصول إلى الأدوات والمواد التدريبية و الفيديوهات
فيديو الدرس التعليمي تنسيق عناصر هيكل صفحة الويب بواسطة خاصية Float
المصادر
سجل دخول وتأكد من اشتراكك في هذا البرنامج الدراسي للوصول إلى الأدوات والمواد التدريبية و المصادر
أوامر تنسيق عناصر هيكل صفحة الويب
ملحقات ال PDF
سجل دخول وتأكد من اشتراكك في هذا البرنامج الدراسي للوصول إلى الأدوات والمواد التدريبية و ملحقات ال PDF
كتاب شرح مساعد لفهم أساسيات Css : Float .Display,filter,min_width,min_height
الدروس والاختبارات لتعلم هذه الدورة التدريبية : دورة تدريبية لغة CSS لإنشاء تصاميم وتنسيق صفحات الإنترنت