يتطلب تخطيط CSS أن تفكر في تصميم موقعك ككل ، ثم تأخذ القطع وتجمعها معًا. تعرّف على كيفية إنشاء تخطيط بسيط مكون من 3 أعمدة باستخدام CSS.
01 من 09ارسم تخطيطك
يمكنك رسم تخطيطك على الورق أو في برنامج رسومات. إذا كان لديك بالفعل إطار سلكي أو تصميم أكثر شمولاً في الاعتبار ، فقم بتبسيطه إلى المربعات الأساسية التي تشكل الموقع. يحتوي هذا التصميم المصاحب لهذه المقالة على ثلاثة أعمدة في منطقة المحتوى الرئيسية ، بالإضافة إلى رأس وتذييل. إذا نظرت عن كثب ، يمكنك أن ترى أن الأعمدة الثلاثة ليست متساوية في العرض.
بعد رسم تخطيطك ، يمكنك البدء في التفكير في الأبعاد. هذا التصميم المثال سيكون له الأبعاد الأساسية التالية:
- لا يزيد عرضه عن 900 بكسل
- 20 px الحضيض على اليسار
- 10 بكسل بين الأعمدة والصفوف
- أعمدة بحجم 250 بكسل و 300 بكسل وعرض 300 بكسل
- الصف العلوي هو 150 بكسل
- الصف السفلي هو 100 بكسل
اكتب HTML / CSS أساسيًا وقم بإنشاء عنصر حاوية
نظرًا لأن هذه الصفحة ستكون مستند HTML صالح ، فابدأ باستخدام حاوية HTML فارغة
أضف في أنماط CSS الأساسية إلى صفر خارج حدود الصفحة والحدود وحزم paddings. في حين أن هناك أنماط CSS قياسية أخرى للمستندات الجديدة ، فإن هذه الأنماط هي الحد الأدنى الذي تحتاج إليه للحصول على تخطيط نظيف. إضافتها إلى رأس المستند الخاص بك:
لبدء بناء التخطيط ، ضع عنصر حاوية. يحدث أحيانًا أنه يمكنك التخلص من الحاوية لاحقًا ، ولكن بالنسبة إلى معظم التخطيطات ذات العرض الثابت ، فإن جعل عنصر الحاوية يسهل عملية الإدارة عبر متصفحات الويب المختلفة. لذلك في الجسم ضع هذا: وفي ورقة أنماط CSS ، ضع: تحدد الحاوية مدى اتساع محتويات صفحة الويب ، وكذلك أي هوامش في الخارج وحشو من الداخل. بالنسبة إلى هذا المستند ، يبلغ حجم الحاوية 870 بكسل ، مع ميزاب 20 بكسل على الجانب الأيسر. يتم إعداد الميزاب بأسلوب الهامش ، ولكن المساحة الموجودة على الحاوية تكون صفرية لمنع أي عناصر من أن تكون واسعة مثل الحاوية. #حاوية { العرض: 870 بكسل ؛ الهامش: 0 0 0 20px؛ / * أعلى اليمين السفلي الأيسر * / الحشو: 0؛ } إذا قمت بحفظ المستند الآن ، فسيكون من الصعب رؤية الحاوية لأنها لا تحتوي على أي شيء فيها. إذا أضفت نصًا موضعًا ، فستتمكن من رؤية عنصر الحاوية بشكل أكثر وضوحًا. تعتمد الطريقة التي تقرر بها ترتيب صف الرأس كثيرًا على ما فيه. إذا كان صف الرأس سيكون مجرد رسم شعار وعنوان ، فيمكنك استخدام علامة عنوان ( ينتقل HTML لصف الرأس إلى أعلى الحاوية ويظهر على النحو التالي: بعد ذلك ، لتعيين الأنماط عليه ، تمت إضافة حد أحمر على الجزء السفلي حتى تتمكن من رؤية مكانه ، وتم تحديد الهوامش والحشو من الصفر ، والعرض تم ضبطه على 100٪ والارتفاع إلى 150 بكسل: #container h1 { الهامش: 0؛ الحشو: 0؛ العرض: 100 ٪. الارتفاع: 150 بكسل ؛ تعويم: اليسار؛ الحد السفلي: # c00 solid 3px؛ } لا تنس أن تطفو هذا العنصر مع التعويم: left؛ خاصية. المفتاح لكتابة تخطيطات CSS هو تعويم كل شيء - حتى الأشياء التي تكون بنفس عرض الحاوية. بهذه الطريقة ، ستعرف دائماً أين ستقع العناصر على الصفحة. قام محدد منحدرات CSS بتطبيق الأنماط فقط على عناصر H1 الموجودة داخل عنصر #container. عند إنشاء تخطيط مكون من ثلاثة أعمدة باستخدام CSS ، يلزمك تقسيم التنسيق إلى مجموعات مكونة من مجموعتين. إذن ، بالنسبة إلى هذا التخطيط المكون من ثلاثة أعمدة ، العمود الأوسط واليمين ويتم تجميعه ووضعه بجوار العمود الأيمن في مخطط مكون من عمودين ، حيث يبلغ العمود الأيسر 250 بكسل ، ويبلغ العمود الأيمن 610 بكسل (300 لكل عمودين ، بالإضافة إلى 10px للميزاب بينهما). يبدو HTML كما يلي: Ut aliquip ex ea commodo consequat. Velit esse cillum dolore ut enim ad minim veniam، lorem ipsum dolor sit amet. في reprehenderit في volumptate quis nostrud exercitation eu fugiat nulla pariatur. Velit esse cillum dolore ullamco laboris nisi ut aliquip ex ea commodo consequat. Ut enim ad minim veniam، sed do eiusmod tempor incididunt ullamco laboris nisi. Ut labore et dolore magna aliqua. Velit esse cillum dolore eu fugiat nulla pariatur. نص العنصر النائب في الأعمدة يجعلها أكثر وضوحًا عند الاختبار. يشبه CSS هذا: #container # col1 { العرض: 250 بكسل ؛ تعويم: اليسار؛ } #container # col2outer { العرض: 610 بكسل. تعويم: يمين الهامش: 0؛ الحشو: 0؛ } يطفو العمود الموجود على اليسار إلى اليسار ، بينما يطفو الآخر إلى اليمين. نظرًا لأن إجمالي العرض لكلا العمودين 860 بكسل ، فهناك ميزاب 10 بكسل بينهما. لإنشاء الأعمدة الثلاثة ، أضف قسمين داخل العمود الثاني الأوسع ، تمامًا كما قمت بإضافة 2 divs داخل عمود الحاوية في الخطوة الأخيرة. يبدو HTML كما يلي: Ut enim ad minim veniam، sed do eiusmod tempor incididunt ullamco laboris nisi. Ut labore et dolore magna aliqua. Velit esse cillum dolore eu fugiat nulla pariatur. Nam libero tempore، quia voluptas sit aspernatur dicta sunt explicabo.Ullam corporis suscipit laboriosam، magnam aliquam quaerat voluptatem. Itaque earum ricum hic tenetur a sapiente delectus، sed ut perspiciatis unde omnis tempora incidunt ut labore et dolore. وتبدو CSS كما يلي: # col2outer # col2mid { العرض: 300 بكسل ؛ تعويم: اليسار؛ } # col2outer # col2side { العرض: 300 بكسل ؛ تعويم: يمين } نظرًا لأن العلبتين العريضتين بحجم 300 بكسل داخل مربع عريض 610 بكسل ، سيكون هناك مجددًا ميزاب 10 بكسل بينهما. والآن بعد أن تم تصميم بقية الصفحة ، يمكنك إضافتها في التذييل. استخدم div آخر بمعرف "تذييل" ، وأضف محتوى حتى تتمكن من رؤيته. يمكنك أيضًا إضافة حد في الجزء العلوي ، حتى تعرف مكانه. HTML: CSS: #container #footer {
تعويم: اليسار؛
العرض: 870 بكسل ؛
الحد الأعلى: # c00 solid 3px؛
} 08 من 09 الآن وبعد الانتهاء من التصميم ، يمكنك البدء في إضافة الأنماط والمحتويات الشخصية الخاصة بك. تذكر أن الحدود الموجودة على رأس الصفحة وتذييلها تمت إضافتها لإظهار أقسام التخطيط ، وليس خصيصًا للتصميم. في ما يلي المستند بالكامل ، HTML ، و CSS: نمط الحاوية
استخدم علامة Headline للعنوان
) أكثر منطقية من استخدام
صفي رأس
للحصول على ثلاثة أعمدة ، ابدأ ببناء عمودين
إضافة اثنين من الأعمدة داخل العمود الثاني عريض
أضف في التذييل
أضف في أنماطك الشخصية والمحتوى الخاص بك
HTML / CSS النهائي
