يتطلب تخطيط CSS أن تفكر في تصميم موقعك ككل ، ثم تأخذ القطع وتجمعها معًا. تعرّف على كيفية إنشاء تخطيط بسيط مكون من 3 أعمدة باستخدام CSS.
01 من 09
ارسم تخطيطك
يمكنك رسم تخطيطك على الورق أو في برنامج رسومات . إذا كان لديك بالفعل إطار سلكي أو تصميم أكثر شمولاً في الاعتبار ، فقم بتبسيطه إلى المربعات الأساسية التي تشكل الموقع. يحتوي هذا التصميم المصاحب لهذه المقالة على ثلاثة أعمدة في منطقة المحتوى الرئيسية ، بالإضافة إلى رأس وتذييل. إذا نظرت عن كثب ، يمكنك أن ترى أن الأعمدة الثلاثة ليست متساوية في العرض.
بعد رسم تخطيطك ، يمكنك البدء في التفكير في الأبعاد. هذا التصميم المثال سيكون له الأبعاد الأساسية التالية:
- لا يزيد عرضه عن 900 بكسل
- 20 px الحضيض على اليسار
- 10 بكسل بين الأعمدة والصفوف
- أعمدة بحجم 250 بكسل و 300 بكسل وعرض 300 بكسل
- الصف العلوي هو 150 بكسل
- الصف السفلي هو 100 بكسل
02 من 09
اكتب HTML / CSS أساسيًا وقم بإنشاء عنصر حاوية
نظرًا لأن هذه الصفحة ستكون مستند HTML صالح ، فابدأ باستخدام حاوية HTML فارغة
أضف في أنماط CSS الأساسية إلى صفر خارج حدود الصفحة والحدود وحزم paddings . في حين أن هناك أنماط CSS قياسية أخرى للمستندات الجديدة ، فإن هذه الأنماط هي الحد الأدنى الذي تحتاج إليه للحصول على تخطيط نظيف. إضافتها إلى رأس المستند الخاص بك: