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

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

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

آموزش طراحی باکس نرم افزار های مورد نیاز در سایدبار

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

کد های html

دقت داشته باشید که من باز از تگ aside برای باکس استفاده کردم برای عنوان از تگ header با کلاس tittle .

بیشتر بخوانید :
آموزش HTML5 و CSS3 آموزش display در CSS | پاسخ وردپرس |

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

دانلود تصویر استفاده شده

آموزش html و css پاسخ وردپرسآموزش html و css پاسخ وردپرسآموزش html و css پاسخ وردپرس آموزش html و css پاسخ وردپرس آموزش html و css پاسخ وردپرس آموزش html و css پاسخ وردپرس آموزش html و css پاسخ وردپرس

بعد از این تصاویر را دانلود کردید داخل پوشه images  یک پوشه ایجاد کنید بنام software فقط با خاطر مرتب سازی.
اگه الان فایل را دخل یک مرور گر اجرا کنید مانند تصویر زیر خواهید بود .

نتیجه کار

آموزش html و css طراحی باکس

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

کد های css

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

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

نتیجه کار

آموزش html و css طراحی باکس

همان طور می بینید برای عنوان باکس نرم افزاز یک استایل مناسب در نظر گرفتیم.

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

کدهای css

خوب بعد از قرار دادن کد های بالا نتیجه کار مثل تصویر زیر خواهد بود که یک hover هم در
نظر گرفتیم که برای پس زمینه است یک رنگ سبز است .

بیشتر بخوانید :
آموزش html و css جلسه 9 لیست ها در html | پاسخ وردپرس |

نتیجه کار

آموزش html و css طراحی باکس

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

تایکی دیگه از آموزش وب سایت پاسخ وردپرس خدانگهدار

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

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

لینک کپی شد!

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

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