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

//

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

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

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

کد های html

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

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

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

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

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

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

کدهای css

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

نتیجه کار

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

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

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

پیشنهاد ویژه برای یاد گیری طراحی قالب html css به صورت حرفه ای

آموزش طراحی سایت HTML5 CSS3 با bootstrap 5

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

نظرات

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

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