طراحی قالب یک فوتر بسازیم 13

در پایان طراحی یک قالب ما برای زیبا تر شدن طرح قالب یک پاصفحه یا فوتر به قالب اضافه می کنیم نحوه ساخت فوتر در قالب نویسی بسیار ساده است برای این کار به طرح قالبی که در چند قسمت پیش ساختیم بروید

طبق روال همیشگی یک id به نام  foter می سازیم و درون استایل قالب قرار می دهیم

 #foter {

 }

و به بدنه قالب رفته و یک تگ دایو بعد از تگ دایو clear ایجاد می کنیم و یک نوشته به آن اضافه می کنیم

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


<div class=clear></div>

 <div id=”foter”>
کپی با ذکر منبع مجاز می باشد
 </div>

</div>

حالا به استایل رفته و شروع به خاصیت دادن به foter می کنیم ابتدا خاصیت رنگ پس زمینه و طول height را به مقدار 30 پیکسل قرار می دهیم

 #foter {
 background-color: #EEEEEE;
 height: 30px;
 }

سپس برای آن یک بوردر از بالا قرار می دهیم و برای متن آن یک اندازه تعریف می کنیم

 #foter {
 background-color: #EEEEEE;
 height: 30px;
 border-top: 1px  dashed #CCCCCC;
 font-size: 0.7em;
 }

و در پایان هم بقیه خاصیت ها که شامل رنگ متن و حاشیه ها می شوند را وارد می کنیم

#foter{
background-color: #EEEEEE;
height: 30px;
border-top: 1px  dashed #CCCCCC;
font-size: 0.7em;
padding-top: 10px;
padding-left: 5px;
color: #BBBBBB;
}

در آخر کد کلی قالب به شکل زیر خواهد بود

 

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

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