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

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

آموزش طراحی بخش خدمات سایت

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

فایل نهایی 

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

قدم اول 

برای شروع طراحی footer سایت کدهای html زیر را داخل فایل index.html خود قرار دهید .

نکته : 

ما برای این که کدهای بالا باهم دیگه تداخول اینجاد نکنه از کلاس clear برای از بین بردن float استفاده کردیم
و در نهایت از تگ footer که کد HTML5 است استفاده کردیم .

قدم دوم

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

کدهای HTML

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

بیشتر بخوانید :
آموزش html و css معرفی تگ های html5 قسمت اول | پاسخ وردپرس |

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

قدم سوم 

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

کدهای css

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

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

قدم چهارم 

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

کدهای css

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

بیشتر بخوانید :
آموزش HTML5 و CSS3 تگهای video و audio | پاسخ وردپرس |

فایل نهایی بخش خدمات ما

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

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

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

لینک کپی شد!

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

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