آموزش html5 و css3 آموزش طراحی بخش محتوا سایت بخش تکمیلی | پاسخ وردپرس |

بنام خدا سلام خدمت شما کاربران وب سایت پاسخ وردپرس درخدمت شما هستم با آموزش html5 و css3 
با جلسه ۱۳ طراحی پروژ نهایی در وب سایت پاسخ وردپرس بخش تکمیل طراحی بخش محتوا سایت .

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

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

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

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

برای استایل دهی بخش محتوا کد زیر کپی کرده داخل فایل style.css  بعد از کد ها sidebar-right خود که توی جلسات کذشته قرار دادیم
قرار دهید .

کد های css

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

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

آموزش طراحی قالب html5 و css3

توی قدم بعدی میخواهیم بخش header محتوا استایل دهی کنیم برای این کار کد های زیر کپی کرده و بعد از
کد های قبلی قرار دهید .

کد های css

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

بیشتر بخوانید :
آموزش css آموزش ویژگی overflow در css | پاسخ وردپرس |

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

آموزش طراحی قالب html5 و css3

بعد از این که بخش header محتوا سایت را به طور کامل استایل
دهید کردیم الان نوبت استایل دهی بخش محتوا است
برای این کد زیر کپی کرده بعد از کد های قبلی قرار دهید.

کد های css

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

آموزش طراحی قالب html5 و css3

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

کد های css

بعد از قرار دادن کد های بالا ما باید یک چیز مثل تصویر زیر داشته باشیم که به صورت خیلی خیلی زیبا طراحی شده است.

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

آموزش طراحی قالب html5 و css3

خوب دوستان و همران وب سایت پاسخ وردپرس همان طور که دارید مشاهده می کنید
بخش محتوا سایت را به این زیبایی با هم طراحی کردیم.

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

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

لینک کپی شد!

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

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