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




 

آموزش وردپرس WordPressآموزش وردپرس WordPress سایت

آموزش جی کوئری jQueryآموزش جی کوئری jQuery جاوا اسکریپت

آموزش انگولار جی اس Angular JS آموزش انگولار جی اس 2 AngularJS 

آموزش اچ تی ام ال HTML5 CSS3آموزش HTML5 و CSS3 اچ تی ام ال 5

آموزش پی اچ پی PHPآموزش پی اچ پی PHP پک 1 برنامه نویسی وب

آموزش سئو SEO آموزش سئو سایت و وردپرس SEO گوگل 

آموزش هک قانونی آموزش هک قانونی - نفوذ و امنیت - پک1

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

آموزش زامارین Xamarinآموزش زامارین Xamarin برنامه نویسی موبایل

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

آموزش ساخت تب جی کوئری و سی اس اس

CSS , HTML5 , اسکریپت ها , جی کوئری , ديگر اسكريپتها , متفرقه
آموزش ساخت تب جی کوئری و سی اس اسReviewed by جواد on Sep 2Rating: 5.0آموزش ساخت تب جی کوئری و سی اس اسدر این مطلب از سایت بیست اسکریپت ساخت یک تب زیبا با استفاده از فناوری جی کوئری و سی اس اس را آموزش میدهیم. در کد نویسی اسکریپت حاضر از جی کوئری و سی اس اس استفاده شده و با طرح و فرم مدرن و زیبایی که دارد نمای متفاوتی را به وبسایت شما هدیه می دهد. هم اکنون جهت مشاهده آموزش با ما باشد.

در این مطلب از سایت بیست اسکریپت ساخت یک تب زیبا با استفاده از فناوری جی کوئری و سی اس اس را آموزش میدهیم. در کد نویسی اسکریپت حاضر از جی کوئری و سی اس اس استفاده شده و با طرح و فرم مدرن و زیبایی که دارد نمای متفاوتی را به وبسایت شما هدیه می دهد. هم اکنون جهت مشاهده آموزش با ما باشد.

 

بخش اول HTML :

خوب کد های زیر را به هر جایی از قالب خود که می خواهید اضافه کنید.

 

 همون طوری که مشاهده می کنید بخش HTML از یک لیست مرتب با آی دی nav و یک عنصر div با کلاس list-wrap تشکیل شده که قسمت اول برای عنوان تب ها و بخش دوم برای محتوای آن ها می باشد. به آدرس لینک های لیست nav و ID لیست های داخلی عنصر div با کلاس list-wrap دقت کنید.

بخش دوم CSS :

استایلی که در این بخش به عناصر تعریف شده یک استایل ساده است که فقط برای اصلاح ظاهر برگه ها هست و به راحتی می تونید این بخش رو مناسب طراحی خود تغییر دهید. این استایل را به فایل مورد نظر اضافه کنید.

 بخش سوم جی کوئری :

در نهایت قسمت جی کوئری برای ایجاد افکت هنگام تغییر برگه ها می باشد.

طریقه استفاده از پلاگین بالا :

کد بالا برای دو تب بندی نوشته شده است.


به کانال تلگرام بیست اسکریپت بپیوندید !

دانلود

مطلب مفیدی بود ؟
نویسنده : admin تاریخ : 1393/06/11 10 CSS , HTML5 , اسکریپت ها , جی کوئری , ديگر اسكريپتها , متفرقه

لینک کوتاه مطلب : http://www.20script.ir/?p=8275

کلمات کلیدی پست :
درگاه پرداخت
مطالب مرتبط
5,357قالب ساز HTML به صورت آنلاین با اسکریپت Mega Blocks تاریخ : 1395/03/21
3,009اسکریپت مدیریت هتل و مهمانسرا iHostel تاریخ : 1395/08/10
698تب بندی مطالب وردپرسی با افزونه WordPress Post Tabs تاریخ : 1395/12/23
7,142اسکریپت حرفه ای فال حافظ تاریخ : 1392/10/5
2,904افزونه وردپرس تعیین نقش کاربران User Role Editor Pro نسخه 4.20 تاریخ : 1394/09/4
2,566دانلود قالب آی تی سلام برای وردپرس تاریخ : 1394/10/16
36,707دانلود قالب خبری Goodnews فارسی نسخه 5.7.3 برای وردپرس تاریخ : 1394/04/26
4,699اسکریپت کوتاه کننده لینک YOURLS تاریخ : 1395/01/15
6,302دانلود قالب شیک و حرفه ای برای هاستینگ تاریخ : 1392/09/27
2,945دانلود قالب سئو تک برای میهالیسم تاریخ : 1393/10/18
5,830افزونه خبرنامه AcyMailing فارسی نسخه 5 برای جوملا تاریخ : 1394/10/6
5,051اسکریپت حرفه ای گالری تصاویر والپیپر PHPWScript تاریخ : 1394/01/19
برخی از قالب های وبلاگ - بیست اسکریپت
قالب عشق بین انگشت ها
قالب دخترونه و آرایش
قالب زیبای ماشین
قالب فانتزی و طنز چِشم
قالب دختر رویایی
قالب وبلاگ دکوراسیون
قالب وبلاگ کلبه و درخت
قالب دختر زیبا
قالب پسرونه غمگین
قالب عاشقانه قلب