طراحی قالب ،ایجاد پست 11

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

به بخش استایل رفته و یک id به نام post ایجا می کنیم به شکل زیر

#post{

}

و طبق روال برای این id ما باید در بدنه سند اچ تی ام ال در بخش 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>


</div>

خب حالا به بخش استایل قالب  و به post می رویم ابتدا باید عرض کادر پست را مشخص کنیم برای اینکار از خاصیت width و مقدار 660 پیکسل استفاده می کنیم و همچنین برای اینکه متن خود را راست چین کنیم از خاصیت direction  استفاده می کنیم

#post{
width: 660px;
direction: rtl;
}

برای اینکه متن پست ها زیر منوی بلوک ها قرار نگیرد بایستی آن را به سمت چپ شناور سازیم برای این کار از خاصیت float استفاده می کنیم و رنگ بکگراند را خاکستری روشن قرار می دهیم برای این کار از خاصیت background-color استفاده می کنیم

#post{
width: 660px;
direction: rtl;
float: left;
background-color: #EEEEEE;
}

و برای اینکه کادر پست  از بالا فاصله بگیرد بایستی از خاصیت margin-top و برای فاصله از راست از خاصیت margin-left استفاده می کنیم و برای زیبا شدن کادر یک حاشه با استفاده از خاصیت border اضافه می کنیم

#post{
width: 660px;
direction: rtl;
float: left;
background-color: #EEEEEE;
margin-top: 20px;
margin-left: 30px;
border:  solid 1px;
}

تا اینجا ما تنضیمات کادر پست را انجام دادیم برای اینکه یک عنوان برای پست بسازیم باید چه کار کنیم ؟

جواب ساده است برای این کار به استایل قالب رفته و یک id به نام postheder بسازید مانند زیر

#postheder{

}

حالا به قسمت بدنه قالب رفته و این id را در تگ دایو post  قرار دهید  و برای درک بهتر موضوع یک متن درون این تگ بنویسید به عنوان مثال “موضوع پست “

<div id=”post”>
<div id=”postheder”>موضوع پست </div>


</div>

ابتدا یک پس زمینه برای عنوان با خاصیت background-image انتخاب کنید سپس ارتفاع height آن را برابر 28 پیکسل قرار دهید و در ادامه سایز فونت را 1.2 قرار می دهیم

#postheder{
  background-image: url(http://s1.picofile.com/file/7509379351/headers.gif);
  height: 28px;
  font-size: 1.2em;
}

در ادامه متن عنوان را با استفاده از خاصیت  font-weight منت را ضخیم می کنیم و با استفاده از خاصیت padding-right متن عنوان را به سمت راست هدایت می کنیم تا به کادر نچسبد

#postheder{
background-image: url(http://s1.picofile.com/file/7509379351/headers.gif);
height: 28px;
font-size: 1.2em;
font-weight: bold;
padding-right: 10px;
}

برای آنکه متن عنوان پست را به صورت لینک دار نمایش دهیم یک تگ لینک به اول و آخر متن اضافه می کنیم به شکل زیر

<div id=”post”>
<div id=”postheder”><a href=”#”>موضوع پست</a></div>
</div>

و برای تغییر رنگ لینک به شکل زیر عمل کنید

#postheder a{
  color: #669933;
}

این شکل که اول id نوشته شده بعد تگ خاصیت لینک یعنی فقط لینک های این id تغییر رنگ پیدا کنند و برای تغیر hover هم به شکل زیر عمل کنید

#postheder a:hover{
  color: #0066FF;
}

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

 

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

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