آموزش طراحی قالب HTML و CSS جلسه ۳

//

آموزش طراحی قالب HTML و CSS جلسه ۳

ســــــلام ,

در خدمت شما هستم با جلسه سوم آموزش طراحی قالب HTML  و CSS  در وب سایت پاسخ وردپرس
توی این جلسه میخواهیم منوی اصلی را به طور کامل پیاده سازی کنیم پس با من همراه باشید .

https://replywp.com/wp-content/uploads/2018/06/Html_css_part_33.mp4

آموزش طراحی قالب HTML و CSS طراحی منوی اصلی  به صورت آبشاری

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

نکته 

ما برای این پس رمینه منو را به صورت ۱۰۰ درصد قرار بدیم بعد از DIV  با کلاس container یک تک
nav با کلاس main-menu قرار دادیم اگه کد های را داخل مرور گر اجرا کنید مثل تصویر زیر خواهد بود

نتیجه کار

طراحی منوی اصلی + آبشاری

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

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

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

نتیجه کار

طراحی منوی اصلی + آبشاری

بعد از این که منوی را به صورت کامل استایل بهش دادیم الان نوبت زیر منو یا همان منوی آبشاری است

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

برای این کار کد های html زیر را کپی و جاگزین کدهای قبلی نمایید .

نکته : 

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

نتیجه کار

طراحی منوی اصلی + آبشاری

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

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

نتیجه کار

طراحی منوی اصلی + آبشاری

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

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

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

نظرات

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

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