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

مطالب پیشنهادی برای شما مهمان عزیز

بنام خدا سلام خدمت تمام کاربران وب سایت پاسخ وردپرس در خدمت شما هستم جلسه ۱۷  آموزش طراحی
قالب HTML5 و  CSS3 توی این جلسه از آموزش میخواهیم برای نمایش پر بازدید ترین مطالب وب سایت خود یک
باکس بسیار زیبا طراحی کنیم توی جلسات قبلی آموزش برای نمایش مطالب تصادفی یک باکس بسیار زیبا طراحی کردیم
پس با من همراه باشید .

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

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

فایل نهایی

آموزش طراحی باکس پربازدیدترین مطالب

شروع آموزش طراحی باکس پربازدیدترین مطالب 

برای این که بتوانید باکس پربازدیدتزین مطالب را نمایش بدیم کد های html زیر را بعد از کد های باکس مطالب تصادفی
داخل فایل index.html خود قرار دهید .

کد های html

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

بیشتر بخوانید :
آموزش html و css آموزش طراحی باکس مطالب تصادفی در سایدبار | پاسخ وردپرس |

نتیجه کار

آموزش طراحی باکس پربازدیدترین مطالب

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

کد های css

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

بیشتر بخوانید :
آموزش HTML و CSS آشنایی با CSS Float جلسه 15 | پاسخ وردپرس |

نتیجه کار

آموزش طراحی باکس پربازدیدترین مطالب

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

کد های CSS

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

بیشتر بخوانید :
آموزش HTML5 و CSS3 معرفی سلکتور و تنظیم پس زمینه در css | پاسخ وردپرس |

فایل نهایی

آموزش طراحی باکس پربازدیدترین مطالب

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

راستی! برای دریافت مطالب جدید در کانال تلگرام یا پیج اینستاگرام یا پیج یوتیوب پاسخ وردپرس عضو شوید.

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

لینک کپی شد!

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

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