غالبًا ما تعرض مواقع الويب المحتوى في عدة أعمدة (مثل مجلة أو جريدة).
London is the capital city of England. It is the most populous city in the United Kingdom, with a metropolitan area of over 13 million inhabitants.
Standing on the River Thames, London has been a major settlement for two millennia, its history going back to its founding by the Romans, who named it Londinium.
يحتوي HTML على العديد من العناصر الدلالية التي تحدد الأجزاء المختلفة لصفحة الويب:
هناك أربع تقنيات مختلفة لإنشاء تخطيطات متعددة الأعمدة. كل تقنية لها مزاياها وعيوبها:
إذا كنت ترغب في إنشاء تخطيطك بسرعة ، يمكنك استخدام إطار عمل CSS ، مثل W3.CSS أو Bootstrap .
هل سمعت عن W3Schools Spaces ؟ هنا يمكنك إنشاء موقع الويب الخاص بك من البداية أو استخدام قالب واستضافته مجانًا.
ابدأ مجانًا ❯* بطاقة الإئتمان غير مطالب بها
من الشائع عمل تخطيطات ويب كاملة باستخدام
floatخاصية CSS. من السهل تعلم Float - ما عليك سوى أن تتذكر كيف تعمل هذه الخصائص وخصائصها
float. العيوب: ترتبط العناصر العائمة بتدفق المستند ، مما قد يضر بالمرونة. تعرف على المزيد حول تعويم في فصل CSS Float and Clear الخاص بنا.
clear
London is the capital city of England. It is the most populous city in the United Kingdom, with a metropolitan area of over 13 million inhabitants.
Standing on the River Thames, London has been a major settlement for two millennia, its history going back to its founding by the Romans, who named it Londinium.
يضمن استخدام Flexbox أن العناصر تتصرف بشكل متوقع عندما يجب أن يستوعب تخطيط الصفحة أحجام شاشات مختلفة وأجهزة عرض مختلفة.
تعرف على المزيد حول flexbox في فصل CSS Flexbox الخاص بنا .
London is the capital city of England. It is the most populous city in the United Kingdom, with a metropolitan area of over 13 million inhabitants.
Standing on the River Thames, London has been a major settlement for two millennia, its history going back to its founding by the Romans, who named it Londinium.
توفر CSS Grid Layout Module نظام تخطيط قائم على الشبكة ، مع صفوف وأعمدة ، مما يسهل تصميم صفحات الويب دون الحاجة إلى استخدام العوامات وتحديد المواقع.
تعرف على المزيد حول شبكات CSS في فصل CSS Grid Intro .
