ایجاد بدنه قالب 9

در قسمت قبل با ایجاد هدر قالب به طور کلی آشنا شدید در این قسمت قصد داریم نحوه قرار دادن بدنه برای قالبمان را شرح دهیم برای این کار به یک id نیاز داریم و من نامش را warp گذاشتم و به صورت زیر به استایل خود اضافه میکنیم به شکل زیر

#warp { }

حالا به قسمت body سند html رفته و یگ تگ div بعد از تگ هدر ایجاد کنید به این شکل

<div id=”warp”> </div>

اگر یادتان باشد برای هدر عرض را برابر 960px قرار دادیم اینجا هم همین کار را میکنیم

#warp{
   width: 960px;
}

کد اصلی تا به اینجا باید به این شکل باشد

 

 

خب طبق معمول برای اینکه بدنه قالب ما تراز شود از خاصیت margin استفاده می کنیم

#warp{
  width: 960px;
  margin-left: auto;
  margin-right: auto;
}

بخش بعدی تعیین یک پس زمینه برای بدنه است اینجا می توانیم هم از عکس یا رنگ برای این کار استفاده کنید من اینجا از رنگ  سفید استفاده می کنم

#warp{
  width: 960px;
  margin-left: auto;
  margin-right: auto;
  background-color: #FFFFFF;
}

حالا باید یک خط برای حاشیه کادر بدنه با border ایجاد کنیم که من آن را برابر 1px و ضخیم solid قرار دادم به شکل زیر

#warp{
  width: 960px;
  margin-left: auto;
  margin-right: auto;
  background-color: #FFFFFF;
  border: 1px solid;
}

تا اینجا بدنه قالب ما تا حدودی ساخته شده و کد کلی این بخش به صورت زیر است

 

 

نکات مهم این بخش : اول اینکه برای بدنه خود ارتفاعheight تعیین نکنید چون این کار باعث بیرون زدن مطالب از کادر بدنه میشود
و دوم برای اگر به کد اصلی نگاه کرده باشید می بینید که هیچ اتفاقی نیفتاده است برای تست کردن یک تگ پاراگراف <p> ایجاد کرده و درون تگ divبدنه قرار دهید

<div id=”warp”>
  <p align=”center”>این یک متن آزمایشی استاین یک متن آزمایشی است</p>
</div>

دیدگاهتان را بنویسید

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *