آموزش HTML5 و CSS3 آموزش نمایش جدید ترین مطالب در سایدبار | پاسخ وردپرس |

بنام خدا سلام خدمت تمام کاربران وب سایت پاسخ وردپرس در خدمت شما هستم بایکی دیگه از جلسات آموزش HTML5 و CSS3
در خدمت شما هستم با جلسه ۱۵ آموزش طراحی قالب HTML5 و CSS3 ما توی جلسات
گذشته بخش های هدر منو بخش های تبلیغات بخش محتوا و سایدبار راست به صورت کامل خدمت
آموزش دادیم توی این جلسه آموزش طراحی قالب html و css میخواهیم داخل سایدبار یک
باکس برای نمایش جدید ترین مطالب پیاده سازی کنیم پس بامن همراه باشید .

آموزش نمایش جدید ترین مطالب در سایدبار

برای شروع کد های زیر را داخل فایل index.html بعد از کد های تبلیغات که توی جلسه گذشته
خدمت شما آموزش دادیم قرار دهید .

کدهای html

این کد های که قرار دادید برای عنوان جدید ترین مطالب بود برای نمایش محتوا جدید ترین مطالب کد زیر را
بعد از کد های بالا قرار دهید .

بعد از این که کد های بالا را قرار دادیم اگه الان داخل مرورگر فایل index.html را اجرا کنید مثل تصویر زیر خواهید بود.

بیشتر بخوانید :
آموزش HTML و CSS آموزش خاصیت position در CSS | پاسخ وردپرس |

آموزش طراحی قالب html

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

کد های css

برای این که بخواهید برای محتوا استایل مناسب بدید بدید کد های زیر کپی کرده داخل فایل style.css خود بعد از کد های
بالا قرار دهید .

کد های css

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

بیشتر بخوانید :
آموزش طراحی قالب HTML5 و CSS3 طراحی باکس پربازدید ترین مطالب | پاسخ وردپرس |

آموزش طراحی قالب html

برای این که یکم کار ما زیبا تر بشه برای هر بخش از محتوا یک hover تعریف می کنیم برای این کار
کد های زیر را داخل فایل style.css خود قرار دهید .

نتیجه کار مثل تصویر زیر خواهد شد 

آموزش طراحی قالب html

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

یک برنامه نویس آزاد که علاقه زیادی به اشتراک گذاری اطلاعات خود با دیگران داردم. همیشه به وردپرس فکر می کنم و عاشق وردپرس هستم. من یک web developer هستم و هدف من آسان کردن ورود سایر دوستان به این شغل جذاب هست. زبان برنامه نویسی محبوب من PHP هست.

لینک کپی شد!

نظر شما در این‌باره چیست؟

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