طرح بندی CSS مستلزم آن است که شما به طور کلی از طرح وب سایت خود فکر می کنید و سپس قطعات را با هم جمع کنید. یاد بگیرید چگونه یک طرح سه ستون ساده با CSS ایجاد کنید.
01 از 09
طرح بندی خود را قرعه کشی کنید
شما می توانید طرح خود را بر روی کاغذ یا در یک برنامه گرافیکی قرعه کشی کنید. اگر شما در حال حاضر یک قاب سیمی یا حتی طرح بزرگتری دارید، آن را ساده تر کنید تا جعبه های اصلی که سایت را تشکیل می دهند را ساده کنید. این طرح که همراه با این مقاله است، دارای سه ستون در محتوا اصلی محتوا و همچنین هدر و پاورقی است. اگر نگاه کنید، می توانید ببینید که سه ستون در عرض برابر نیستند.
پس از اینکه طرح خود را کشف کردید، می توانید از ابعاد فکر کنید. این طرح به شرح زیر می آید:
- بیش از 900 پیکسل عرض نباشد
- چپ 20 پیکسل در سمت چپ
- 10 پیکسل بین ستون ها و ردیف ها
- ستونهایی که 250 پیکسل، 300 پیکسل و 300 پیکسل عرض دارند
- ردیف بالا 150 پیکسل بلند است
- ردیف پایین 100px بلند است
02 از 09
نوشتن HTML / CSS عمومی و ایجاد یک عنصر کانتینر
از آنجا که این صفحه یک سند HTML معتبر خواهد بود، با یک کانکشن خالی HTML شروع کنید
در سبک های CSS اصلی به صفر کردن حاشیه ها، حاشیه ها و سطوح صفحه اضافه کنید . در حالی که دیگر سبک های CSS استاندارد برای اسناد جدید وجود دارد، این سبک ها حداقل شما نیاز به یک طرح تمیز. آنها را به سر سند خود اضافه کنید: