آموزش طراحی قالب 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 به سه بخش تقسیم کنم بعد از قرار دادن کدهای بالا نتیجه مثل تصویر زیر خواهد بود .

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

مرحله دوم

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

کدهای css

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

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

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

کدهای css

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

فایل نهایی

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

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

میانگین رتبه 5/5 تعداد رای : 1

نظرات

هیچ دیدگاهی برای این محصول نوشته نشده است.

سبد خرید
در حال بروز رسانی

آموزش‌های ویدیویی جدید یوتیوب رو از دست ندی!

بزن بریــم!