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

//

آموزش طراحی قالب 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

قدم سوم 

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

کدهای css

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

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

قدم چهارم 

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

کدهای css

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

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

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

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

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

نظرات

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

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