آموزش طراحی قالب HTML5 و CSS3 جلسه ۴

//

آموزش طراحی قالب HTML5 و CSS3 جلسه ۴

با ســــــــلام , همراهان وب سایت پاسخ وردپرس 

در خدمت شما هستم با جلسه چهارم آموزش طراحی قالب HTML5 و CSS3 ما توی جلسات قبلی منوی 
اصلی قالب را به طور کامل پیاده سازی کردیم توی این جلسه از آموزش میخواهیم جایگاه بنر تبلیغات را پیاده سازی کنیم

آموزش طراحی قالب HTML5 و CSS3 طراحی جایگاه تبلیغات

برای شروع بعد از این که کد های header یک div با کلاس clear قرار میدیم کد زیر را بعد از کد های  end header قرار بدید .

دقت داشته باشید برای مرتب سازی کد های حتما از کامنت گذاری استفاده نمایید که داخل کد دقت کرده باشید از کامنت start banner استفاده کردم
من برای جایگاه تبلیغات از تصویر های زیر استفاده کردم

تصویر اول

طراحی جایگاه تبلیغات شما پاسخ وردپرس

دانلود بنر اول 

طراحی جایگاه تبلیغات شما پاسخ وردپرس

دانلود بنر دوم 

طراحی جایگاه تبلیغات شما پاسخ وردپرس

دانلود بنر سوم

طراحی جایگاه تبلیغات شما پاسخ وردپرس

دانلود بنر چهارم

بعد از دانلود بنر های بالا یک پوشه داخل پوشه images برای مرتب سازی بنام banner ساخته و تمام بنر ها را داخلش قرار دهید
بعد از این کار کد های زیر را داخل فایل index.html قرار دهید.

اگه دقت کرده باشید من یک لینک به عنوان ( برای سفارش تبلیغات کلیک کنید   ) قرار دادم
برای آدرس تعرفه تبلیغات بعد از کلیک میتوانید ببنید بعد اجرا کد ها نتیجه کار مثل تصویر زیر خواهد بود

طراحی جایگاه تبلیغات شما پاسخ وردپرس

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

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

طراحی جایگاه تبلیغات شما پاسخ وردپرس

برای استایل دگمه سفارش تبلیغات کد زیر داخل فایل style.css قرار دهید .

اگه مرور گر یک بار رفرش کنید مثل تصویر زیر خواهید بود

طراحی جایگاه تبلیغات شما پاسخ وردپرس

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

خوب دوستان عزیز این جلسه از آموزش طراحی قالب HTML5 و CSS3 در وب سایت پاسخ وردپرس به پایان رسید.

توی جلسات بعدی بخش های سایدبار و محتوای سایت را پیاده سازی خواهیم کردم منتظر جلسات بعدی باشید 

 

از ۱ تا ۵ امتیاز بدید.

نظرات

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

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