طرح بندی سایت دو نوع دارد: جدول بندی و بلوک بندی. و اگرچه مورد اول برای ایجاد صفحات html ساده راحت تر است ، اگر شما نیاز به افزودن عناصر جداگانه به صورت بلوک دارید ، مورد دوم ایده آل است.
دستورالعمل ها
مرحله 1
دو روش وجود دارد که به شما امکان می دهد خودتان یک طرح بلوک ایجاد کنید: با قرار دادن ورق های سبک آبشار در یک سند ، یا با اتصال آنها از یک منبع خارجی. هر دو نتیجه یکسانی دارند ، بنابراین هیچ تفاوت اساسی بین آنها وجود ندارد. در حالت اول ، کد زیر را در هر جایی از فایل style.css جایگذاری کنید:
.block1 {
}
Block1 - نام بلوک است ، شما می توانید هر مورد دیگری را بنویسید. بین پرانتزهای فر ، پارامترها را در قالب زیر مشخص کنید: نام ویژگی> نقطه بزرگ> مقدار> نقطه ویرگول (از جمله قبل از مهاربند قرار داده شده). عناصر زیر معمولاً استفاده می شوند:
- عرض - عرض (500 پیکسل ، 100، و غیره) ؛
- ارتفاع - ارتفاع (200 پیکسل ، 25، و غیره) ؛
- پس زمینه - رنگ زمینه (زرد ، قرمز ، # 000000) ؛
- padding - پر کردن اطراف محتوای داخل بلوک (0px ، 20٪)
- حاشیه - حاشیه خارجی از بلوک (15 پیکسل ، 40) ؛
- حاشیه - قاب (حاشیه: جامد 0px سیاه ؛)؛
- شناور - تراز بندی (چپ ، راست) ؛
- حاشیه شعاع - گرد کردن گوشه ها (حاشیه شعاع: 10px ؛).
گام 2
در استفاده دوم از CSS ، یک استایل بین برچسب ها و اضافه کنید:
.block1 {
}
و پارامترهای مورد نظر خود را اضافه کنید.
مرحله 3
با استفاده از دستور ، بلوک را در مکان مورد نظر در سایت قرار دهید:
بلوک 1
صفحه را ذخیره و تازه سازی کنید ، باید ظاهر شود. به خاطر داشته باشید که تراز بودن ارتفاع ممکن است بسته به پر بودن محتوا متفاوت باشد. به عنوان مثال ، اگر 300px تنظیم کنید ، اما فقط یک خط متن بنویسید ، به طور کامل نمایش داده نمی شود. این می تواند اصلاح شود ، به عنوان مثال ، با استفاده از یک جدول با پارامترهای مورد نیاز ، که باید در داخل بلوک قرار گیرد ، به عنوان مثال بین برچسب ها و. و برای اینکه مرزها قابل مشاهده نباشند ، صفت را وارد کنید
