آموزش طراحی قالب html طراحی footer نمایش آخرین نرم افزار های موبایل | پاسخ وردپرس |

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

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

آموزش طراحی footer نمایش آخرین نرم افزار های موبایل

توی جلسات گذشته ما یک بخش برای خدمات قبل از این که بخش footer شروع کنیم ساختیم
توی این جلسه از آموزش طراحی قالب html میخواهیم بعد از بخش خدمات content را پیاده سازی کنیم.

فایل نهایی که خواهیم ساخت .

آموزش طراحی footer نمایش آخرین نرم افزار های موبایل

مرحله اول 

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

کد های html

دقت داشته باشید که برای جدا سازی زا بخش خدمات ما از div با کلاس conetainer استفاده کردیم برای تمام محتوا هم
از div باکلاس footer-content استفاده کردیم.

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

کد های html

من برای بخش بندی برای آخرین نرم افزار های موبایل یک کلاس بانام footer-col-4 تعریف کردم که میخواهم داخل
footer به سه بخش تقسیم کنم بعد از قرار دادن کدهای بالا نتیجه مثل تصویر زیر خواهد بود .

بیشتر بخوانید :
آموزش html5 و css3 جلسه 7 خصوصیات های css

آموزش طراحی footer نمایش آخرین نرم افزار های موبایل

مرحله دوم

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

کدهای css

دقت داشته باشید که من برای تقسیم بندی برای کلاس footer-col-4 عرض ۳۳.۳۳۳۳۳% درصد دادم بعد از
قرار دادن کدهای بالا نتیجه کار مثل تصویر زیرخواهد بود .

بیشتر بخوانید :
آموزش HTML5 و CSS3 آموزش  font-face@ در css

آموزش طراحی footer نمایش آخرین نرم افزار های موبایل

اگه دقت کرده باشید یک عرض ۳۳ درصد گرفته و عنوان هم یک استایل مناسب به خود گرفته برای این که
لیست های ما هم یک استایل داشته باشید کد های css زیر بعد از کد های بالای قراز دهید .

کدهای css

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

بیشتر بخوانید :
آموزش ساخت منوی آبشاری در html و css قسمت اول

فایل نهایی

آموزش طراحی footer نمایش آخرین نرم افزار های موبایل

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

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

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

لینک کپی شد!

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

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