طراحی قالب ساخت پست 12

در این قسمت از آموزش طراحی قالب  قصد داریم که درون پست خود یک متن قرار دهیم سپس برای نوشته خود تاریخ ، دسته مطالب ، نویسنده و… بنویسیم و در پایان پست ها و منو ها را در کادر بدنه قالب قرار دهیم تا شکل کلی خود را بدست بیاورند.

 

اگر در قسمت قبل یادتان باشد برای قالب طراحی شده خود یک بلوک پست ساختیم و برای آن یک عنوان تعیین کردیم حالا برای اینکه یک متن درون پست خود قرار دهیم از تگ پاراگراف <p> استفاده می کنیم به شکل زیر درون تگ دایو post قرار می دهیم

<div id=”post”>
<div id=”postheder”><a href=”#”>موضوع پست</a></div>
 <p> این یک متن آزمایشی است این یک متن آزمایشی است این یک متن آزمایشی است این یک متن آزمایشی است این یک متن آزمایشی است این یک متن آزمایشی است این یک متن آزمایشی است این یک متن آزمایشی است 

</p>

</div>

و یک متن نسبتا کوتاه برای آزمایش درون تگ پاراگراف می نویسیم حال برای اینکهه که مقادیر حشیه ها و سایز متن را تعیین کنیم بایستی از تگ <p> را زیر مجموعه post قرار دهیم به شکل زیر به استایل اضافه می کنیم

#post p {

}

حالا شروع به خاصیت دادن می کنیم ابتدا طبق معمول بایستی متن را با خاصیت text-align تراز بندی کنیم ولی چون ما قبلا متن خود را در استایل post راست چین کردیم این بار از خاصیت justify برای فیکس شدن متن استفاده می کنیم

#post p {
 text-align: justify;
}

برای اینکه متن خود را از کادر فاصله دهیم از خاصیت های padding استفاده می کنیم بالا و پایین را 5 پیکسل فاصله می دهیم و چپ و راست را 10 پیکسل

#post p{
 text-align: justify;
 padding-top: 5px;
 padding-bottom: 5px;
 padding-right: 10px;
 padding-left: 10px;
}

برای ایجاد کادر تاریخ مطالب دسته ها یا نظرات می توانید به این شکل عمل کنید

ابتدا یک کلاس به نام com ایجاد کنید و خاصیت های زیر را اضافه کنید

.com{
 font-size: 0.8em;
 padding-right: 10px;
 padding-left: 10px;
 padding-bottom: 5px;
}

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

<div class=”com”> نویسنده : javaweb | تاریخ : سیزدهم مهر ماه نود و یک | دسته مطالب : موضوعات  | نظرات (0)</div>

کد کلی به شکل زیر است

 

<div id=”post”>
<div id=”postheder”><a href=”#”>موضوع پست</a></div>
  <p> این یک متن آزمایشی است این یک متن آزمایشی است این یک متن آزمایشی است این یک متن آزمایشی است این یک متن آزمایشی است این یک متن آزمایشی است این یک متن آزمایشی است این یک متن آزمایشی است  </p>
<div class=”com”> نویسنده : javaweb | تاریخ : سیزدهم مهر ماه نود و یک | دسته مطالب : موضوعات  | نظرات (0)</div>

</div>

تا اینجا با نحوه ساخت یک پست آشنا شدید اما نکته بسیار مهمی باقی مانده که در ادامه آن را توضیح خواهیم داد

اگر دقت کرده باشید ما  قبلا برای بدنه قالب خود یا همان warp یک بک گراند سفید تعیین کردیم اما این بک گراند برای اینکه زیر موضوعات و بلوک پست ما قرار گیرد بایستی چه کار کنیم ؟

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

.clear{

}

حالا خاصیت clear: both را درون این استایل قرار می دهیم این خاصیت باعث می گردد که همان اندازه که موضوعات در طول یا عرض صفحه ادامه پیدا کنند کادر warp نیز افزایش یابد

.clear{
   clear: both;
}

در پایان دایو این استایل را در آخر تگ دایو warp قرار می دهیم

<div id=”warp”>
    <div id=”menu”>
           <div class=”box”>
           <div class=”titr”>موضوع بلوک</div>
        <a href=”#”>لینک شماره یک</a><br />
        <a href=”#”>لینک شماره یک</a> <br />
        <a href=”#”>لینک شماره یک</a> <br />
        <a href=”#”>لینک شماره یک</a> <br />
        <a href=”#”>لینک شماره یک</a> <br />
           </div>
                    <div class=”box”>
           <div class=”titr”>موضوع بلوک</div>
        <a href=”#”>لینک شماره یک</a><br />
        <a href=”#”>لینک شماره یک</a> <br />
        <a href=”#”>لینک شماره یک</a> <br />
        <a href=”#”>لینک شماره یک</a> <br />
        <a href=”#”>لینک شماره یک</a> <br />
           </div>
    </div>

<div id=”post”>
<div id=”postheder”><a href=”#”>موضوع پست</a></div>
  <p> این یک متن آزمایشی است این یک متن آزمایشی است این یک متن آزمایشی است این یک متن آزمایشی است این یک متن آزمایشی است این یک متن آزمایشی است این یک متن آزمایشی است این یک متن آزمایشی است  </p>
  <div class=”com”> نویسنده : javaweb | تاریخ : سیزدهم مهر ماه نود و یک | دسته مطالب : موضوعات  | نظرات (0)</div>
</div>



 <div class=clear></div>

</div>

 

در پایان کد کلی این بخش به صورت زیر خواهد بود

 

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

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