هناك نوعان من تخطيط الموقع: جدولي وكتلة. وبينما يعد الأول أكثر ملاءمة لإنشاء صفحات html بسيطة ، فإن الأخير مثالي إذا كنت بحاجة إلى إضافة عناصر فردية في شكل كتل.
تعليمات
الخطوة 1
هناك طريقتان تسمحان لك بتطوير تصميم كتلة بنفسك: من خلال تضمين أوراق الأنماط المتتالية في مستند ، أو عن طريق توصيلها من مصدر خارجي. كلاهما يعطي نفس النتيجة ، لذلك لا يوجد فرق جوهري بينهما. في الحالة الأولى ، الصق الكود التالي في أي مكان في ملف style.css:
.كتلة 1 {
}
Block1 - اسم الكتلة ، يمكنك كتابة أي اسم آخر. بين الأقواس المتعرجة ، حدد المعلمات بالتنسيق التالي: اسم السمة> النقطتين> القيمة> الفاصلة المنقوطة (بما في ذلك الموضوعة قبل القوس المتعرج). العناصر التالية شائعة الاستخدام:
- العرض - العرض (500 بكسل ، 100٪ ، إلخ) ؛
- الارتفاع - الارتفاع (200 بكسل ، 25٪ ، إلخ) ؛
- الخلفية - لون الخلفية (أصفر ، أحمر ، # 000000) ؛
- الحشو - الحشو حول المحتوى داخل الكتلة (0 بكسل ، 20٪) ؛
- الهامش - هوامش خارجية من الكتلة (15 بكسل ، 40٪) ؛
- حد - إطار (حد: صلب 0 بكسل أسود ؛) ؛
- تعويم - محاذاة (يسار ، يمين) ؛
- نصف قطر الحد - تقريب الزوايا (نصف قطر الحدود: 10 بكسل ؛).
الخطوة 2
في الاستخدام الثاني لـ CSS ، أضف النمط بين العلامات والعلامات:
.كتلة 1 {
}
وأضف المعلمات التي تريدها.
الخطوه 3
أدخل الكتلة في المكان المطلوب على الموقع باستخدام الأمر:
كتلة 1
احفظ وقم بتحديث الصفحة ، يجب أن تظهر. ضع في اعتبارك أن محاذاة الارتفاع قد تختلف اعتمادًا على مدى امتلاء المحتوى. على سبيل المثال ، إذا قمت بتعيين 300 بكسل ، ولكنك كتبت سطرًا واحدًا فقط من النص ، فلن يتم عرضه بالكامل. يمكن تصحيح ذلك ، على سبيل المثال ، باستخدام جدول مع المعلمات المطلوبة ، والتي يجب وضعها داخل الكتلة ، أي بين العلامات و. وحتى لا تظهر الحدود ، أدخل السمة
