در گرد هم آیی گذشته از کدهای css قالب ، تا نصیب منو پیش رفتیم، درین گرد‌همایی نصیب محتوا را استایل دهی خوا هیم کرد.
در آغاز فولدر style را در ویرایشگر کد گشوده نمائید.
از نصیب container آغاز می کنیم که بایستی رنگ آن را سپید (دور‌نما content و sidebars) در اختیار بگذاریم و کمی محتوای آن را از کناره مسافت دهیم :
#container {
background: #fff;
padding: 10px;
}
و درحال حاضر با به کار گیری float مکان sidebarها و content را انتخاب میکنیم. به کدهای تحت توجه نمایید :
#right-sidebar {
float: right;
}
#content {
float: right;
}
#left-sidebar {
float: left;
}
البته با افزودن این کدها طبعاً تغیری نخواهید رویت کرد ، استدلال آن این میباشد که هنوز پهنا هر بخش را گزینش نکرده ایم برای همین هنوز به صورت ذیل هم قرار دارا هستند پس کد فوق را به صورت پایین بسط می دهیم :
#right-sidebar {
float: right;
width: 230px;
}
#content {
float: right;
width: 520px;
}
#left-sidebar {
float: left;
width: 230px
}
ولی در صورتیکه فولدر را ذخیره و فیض را در مرورگر ببنید انگار مشکلی اتفاق افتاده میباشد!!
container به اندازه ی محتوایش کشیده نشده میباشد و فوتر نیز تغییر تحول مکان داده و به کنار پست آمده میباشد. در شرایطی‌که به حافظه داشته باشید این انواع به خیال به کار گیری از خواص float میباشد پس پوشه index.html را در ویرایشگر کد گشوده نمائید و خط تحت را آنگاه کدهای left-sidebar قرار دهید : (خط سوم کد طولانی تر شده‌است)
حالا که ایراد نیز رفع شد به content کمی margin میدهیم تا از right-sidebar مسافت بگیرد :
#content {
float: right;
width: 520px;
margin-right: 12px;
}
بعداز این فعالیت به استایل دهی بلوک‌ها و پست خوا هیم پرداخت، در آغاز قضیه بلوک‌ها و پست‌ها را با کد پایین تولید می کنیم :
#right-sidebar .block ,
#left-sidebar .block ,
#content .post {
background: #f9f9f9;
padding: 10px;
margin-bottom: 10px;
border-radius: 3px;
border: 1px solid #a7a7a7;
border-bottom-width: 4px;
}
و بعد از آن استایل دهی عنوان ها بلوک‌ها :
#right-sidebar .block .block-title ,
#left-sidebar .block .block-title {
text-align: center;
color: #235678;
text-shadow: 0 0 1px rgba(35,70,120,.70);
padding-bottom: 15px;
margin-bottom: 20px;
background: url(/images/block-title.png) center bottom no-repeat;
}
اکنون استایل پایین رو برای پیوند هایی که در درون بلوک‌ها داریم می‌نویسیم.
#right-sidebar .block .block-content ul li ,
#left-sidebar .block .block-content ul li {
border-bottom: 1px solid #ddd;
padding: 7px;
color: #000;
}
#right-sidebar .block .block-content ul li a ,
#left-sidebar .block .block-content ul li a { color: #000;}
#right-sidebar .block .block-content ul li:hover ,
#left-sidebar .block .block-content ul li:hover {background: #dddeee;}
در صورتیکه پوشه رو ذخیره کرده باشید و سود رو توی مرورگر چشم باشید صرفا استایل تصاویر تبلیغات ما‌نده میباشد. پس با کد تحت آنها‌را نیز استایل دهی می کنیم :
#left-sidebar .block .block-content a img {
margin-right: 15px;
border-radius: 4px;
border-bottom: 4px solid #a7a7a7;
}
#left-sidebar .block .block-content a img:hover {border-bottom-color:#234567;}
درحال حاضر که استایل دهی sidebarها به انتها رسید، نوبت به نصیب مطالب می رسد، در آغاز مسافت محتوای پست را با کد تحت از میان میبریم :
#content .post {padding: 0;}
آنگاه استایل تیتر مقاله رو می‌نویسیم : (یه خرده مختلف‌خیس از psd)
#content .post .post-title {
color: #444;
background: #eee;
padding: 7px 20px 7px 0;
border-bottom: 1px solid #a7a7a7;
margin-bottom: 10px;
text-shadow: 1px 1px 1px #aaa;
border-radius: 3px 3px 0 0;
}
#content .post .post-title:hover {color: #234678;}
و اکنون استایل تصویر بند انگشتی و خلاصه متن. ولی نخست چونکه میخواییم اون هارو با به کار گیری از float کنار هم قرار بدیم، پس بهتره که اولیه این دو رو در درون یک div در اختیار بگذاریم پس کدهای html نصیب مقاله (class=”post”) رو به صورت تحت دستکاری می کنیم :
(خط‌های 3 و 8 طولانی تر گردیده)
تیتر مقاله
\"تصویر
متن مقاله
در اینجا قرار می گیرد ، متن مقاله در اینجا قرار می گیرد ، متن مقاله در اینجا قرار می گیرد ، متن مقاله در اینجا قرار می گیرد ، متن مقاله در اینجا قرار می گیرد ، متن مقاله در اینجا قرار میگیرد ، متن مقاله در اینجا قرار می گیرد ، متن مقاله در اینجا قرار می گیرد ، متن مقاله در اینجا قرار میگیرد.
ادامه مقاله
درحال حاضر استایل این نصیب‌ها :
#content .post .post-thumb {
margin: 0 10px;
float: right;
}
#content .post .post-content {
float: left;
width: 330px;
margin: 0 0 15px 15px;
}
#content .post .post-content p {
text-align: justify;
line-height: 20px;
font-family: tahoma;
font-size: 13px;
}
آنگاه برای از فی مابین بردن خواص float بر بقیه نصیب‌ها کد clear رو به پوشه html، پیشین از کد ادامه مقاله بیش تر میکنیم. (خط شماره 8 بیش تر گردیده)
تیتر مقاله
\"تصویر
متن مقاله
در اینجا قرار می‌گیر ، متن مقاله در اینجا قرار میگیرد ، متن مقاله در اینجا قرار میگیرد ، متن مقاله در اینجا قرار میگیرد ، متن مقاله در اینجا قرار میگیرد ، متن مقاله در اینجا قرار می گیرد ، متن مقاله در اینجا قرار میگیرد ، متن مقاله در اینجا قرار می گیرد ، متن مقاله در اینجا قرار می گیرد.
ادامه مقاله
اکنون استایل دکمه ادامه مقاله را می‌نویسیم :
#content .post .read-more {
background: #fff;
position: relative;
right: 410px;
padding: 0 15px;
border: 1px solid #a7a7a7;
border-bottom-width: 4px;
border-radius: 3px;
font-size: px;
color: #777;
}
#content .post .read-more:hover {
color: #234678;
border-color: #234678;
}
و در انتها استایل داده ها پست را می‌نویسیم :
#content .post .post-meta {
background: #d2d2d2;
border-top: 1px solid #a7a7a7;
margin-top: 15px;
padding: 10px;
padding-top: 7px;
}
#content .post .post-meta * {display: inline;}
#content .post .post-meta .author,
#content .post .post-meta .date {margin-left: 50px;}
#content .post .post-meta div span ,
#content .post .post-meta div a {
color: #255497;
font: 14px tahoma;
}
#content .post .post-meta img {
position: relative;
top: 3px;
margin-right: 3px;
}
بعد از تایپ کردن این کدها، صرفا نصیب فوتر وبسایت باقی میماند :
#footer {
background: #366995;
padding: 10px;
}
#footer .copyright {
color: #fff;
text-align: center;
font-size: 24px;
}
درصورتی که پوشه را ذخیره نمایید و سود را در مرورگر ببنید، کلیه نصیب‌ها استایل دهی گردیده و قالبمان فراهم شده‌است
نکته :
درباره این سایت