• برگه ها در طرح بندی چیست؟ چگونه بدون استفاده از اسکریپت برگه های تطبیقی ​​(تب) در css ایجاد کنیم. سبک های css برای تب ها با استفاده از css3 نقطه به نقطه

    عصر بخیر! امروز به شما خواهم گفت که چگونه می توانید برگه ها (برگه ها) را در css3 خالص بدون استفاده از jquery یا اسکریپت های دیگر بسازید. همانطور که می دانید، هرچه اسکریپت های کمتری استفاده کنید، برای سایت شما بهتر است و سریعتر کار می کند. و سرعت سایت امروزه یکی از مهمترین شاخص های رتبه آن در موتورهای جستجو است.

    بنابراین، بیایید شروع کنیم

    زبانه های تطبیقی ​​(برگه ها) در css خالص و بدون اسکریپت

    امروزه تقریباً در هر سایتی برگه هایی وجود دارد. آنها برای نمایش چندین حوزه محتوا بدون نیاز به پیمایش کاربر به صفحات دیگر مورد نیاز هستند. به عنوان مثال، در یکی از پروژه های من برای توسعه یک فروشگاه آنلاین در جوملا، دو تب اضافه شد که 3 محصول را در دو نوع نمایش می دهد: "پرفروش" و "جدیدترین". تصمیم گرفته شد که آنها را روی css خالص بدون بارگذاری مجدد سایت با اسکریپت های غیر ضروری بسازیم.

    پس بیایید شروع کنیم.

    کد HTML برای برگه ها با استفاده از css3 نقطه به نقطه

    1. اول از همه، ما باید ایجاد کنیم div با کلاس "tabs".

    2. ما مستقیماً دکمه‌هایی را اضافه می‌کنیم که با نام "tabs" تغییر می‌کنند، وقتی فشار داده می‌شود، محتویات برگه‌های ما را شامل می‌شوند.

    3. نام آنها را از طریق برچسب اضافه کنید

    4. زیر دکمه هایی که در مراحل 1-3 ساختیم، محتوایی را که باید نمایش دهیم، مستقیماً اضافه می کنیم. در مورد من، اینها سه محصول آخر و سه محصول برتر هستند.

    هر بلوک دارای یک کلاس tab-content و شناسه های tab-content-1 و tab-content-2 است.

    HTML نهایی برگه های آینده ما

    اینجاست که کار نوشتن htmlمان تمام شده است. موافقم، اینجا هیچ چیز پیچیده ای وجود نداشت. پس بیایید ادامه دهیم.

    سبک های css برای تب ها با استفاده از css3 نقطه به نقطه

    در حال حاضر جالب ترین و دشوار است. ما باید برگه‌های خود را بسازیم که روی کلیک فعال شوند 🙂

    از آنجایی که ما دو زبانه خواهیم داشت، باید به آنها عرضی اختصاص دهیم که روی صفحه قرار بگیرند و از خط آن بالاتر نروند. برای این می نویسیم عرض 50 درصداگر تعداد برگه‌ها متفاوت است، عرض را بر اساس تعداد آنها محاسبه کنید.

    همچنین توجه داشته باشید که به‌طور پیش‌فرض، دکمه‌های ضامن خود را نامرئی می‌کنیم.

    برگه‌ها (حداکثر عرض: 90%؛ شناور: هیچ‌کدام؛ سبک فهرست: هیچ‌کدام؛ بالشتک: 0؛ حاشیه: 75 پیکسل خودکار؛ حاشیه پایین: 4 پیکسل ثابت #cccc؛ ) .tabs:after ( محتوا: ""؛ نمایش: جدول؛ پاک: هر دو؛ ) ورودی برگه ها (نمایش: هیچکدام؛ ) برچسب برگه ها p ( پد: 5 پیکسل؛ حاشیه سمت راست: 0؛ ) برچسب برگه ها (نمایش: بلوک؛ شناور: چپ؛ عرض: 50 درصد؛ رنگ : #cccc؛ اندازه قلم: 30 پیکسل؛ وزن قلم: معمولی؛ تزیین نوشتار: هیچ؛ تراز نوشتاری: مرکز؛ ارتفاع خط: 2؛ مکان نما: اشاره گر؛ کادر سایه: داخل 0 4 پیکسل #ccc؛ حاشیه- پایین: 4 پیکسل جامد #cccc؛ -webkit-transition: همه 0.5 ثانیه؛ /* Safari 3.1 به 6.0 */ انتقال: همه 0.5 ثانیه؛ ) .برگه برگه ها (نمایش: هیچکدام؛ ) .tabs label:hover ( color: # .tab-content (نمایش: هیچکدام؛ عرض: 100%؛ شناور: سمت چپ؛ بالشتک: 15 پیکسل؛ اندازه جعبه: کادر حاشیه؛ رنگ پس‌زمینه: #ffffff؛ )

    چجوری این رو راه بندازم

    و اینجا همه چیز ساده است.

    کد css زیر را اضافه کنید

    برگه‌ها: علامت‌گذاری شده + برچسب ( پس‌زمینه: #FFF؛ کادر-سایه: درج 0 4 پیکسل #3498 دسی‌بل؛ حاشیه پایین: 4 پیکسل ثابت #3498 دسی‌بل؛ رنگ: #3498 دسی‌بل؛ ) #tab-first:checked ~ #tab-content-1، #tab-second: checked ~ #tab-content-2 (نمایش: مسدود؛ )

    در خطوط بالا، با استفاده از یک استایل خاص به تب فعال اضافه می کنیم :چک شده + برچسب

    #tab-first: checked ~ #tab-content-1- این خط می گوید که ما باید محتوایی را نمایش دهیم که دارد id="tab-content-1"، اگر ابتدا برگهوضعیت دارد بررسی شد.

    پاسخگو کردن برگه های ما

    @media (حداقل عرض: 768 پیکسل) ( .tabs p ( padding: 5px; margin-right: 10px; ) .tabs (حداکثر عرض: 750px؛ حاشیه: 50px خودکار؛ ))

    خب، این اساساً همه چیز است. برگه های ما آماده است :). شما می توانید آنها را به دلخواه تغییر دهید، اضافه یا حذف کنید. ممنون از توجه شما 🙂

    چندی پیش، ما به پیاده سازی تب ها (برگه ها) با محتوا، بدون اتصال جاوا اسکریپت، تنها با استفاده از .
    امروز می‌خواهم راه‌حل دیگری، نه کمتر جالب، برای تشکیل یک بلوک فشرده از زبانه‌ها (برگه‌ها) ساخته شده بر روی CSS3 خالص و با استفاده از عناصر طرح‌بندی تطبیقی ​​را به شما معرفی کنم. مانند گزینه اول، هیچ چیز اضافی و دست و پا گیر نیست، حداقل کد css، و شما یک بلوک تطبیقی ​​با برگه های قابل تعویض خواهید داشت که کاملاً در هر بخش از صفحه قرار می گیرد، خواه یک پیام جداگانه، یک ستون کناری یا یک پنجره مودال

    در مورد گزینه اول چه تغییراتی ایجاد شده است؟
    اول از همه، بلوک تب تطبیقی ​​شده است، i. هنگام مشاهده در دستگاه های تلفن همراه، اندازه برگه ها بسته به اندازه صفحه نمایش دستگاه های کاربر تغییر می کند، متن عنوان حذف می شود و فقط فونت های نماد باقی می ماند که نشان دهنده معنای محتوای یک یا دیگری است.
    من فونت آیکون را از روی پیچ کردم، مجموعه بسیار غنی و، علاوه بر این، کاملا رایگان است. می‌توانید با استفاده از مجموعه فونت‌های دانلود شده، آیکون‌ها را در هر پروژه‌ای ادغام کنید یا مستقیماً آنها را از طریق @import با استفاده از این خط به فایل سبک css خود از سایت توسعه‌دهنده متصل کنید:

    @import url( "http://maxcdn.bootstrapcdn.com/font-awesome/4.1.0/css/font-awesome.min.css") ;

    آدرس @import ("http://maxcdn.bootstrapcdn.com/font-awesome/4.1.0/css/font-awesome.min.css");

    در نسخه ی نمایشی، این دقیقاً همان کاری است که من انجام دادم، بنابراین با نگاه کردن به کد منبع، به راحتی می توانید بفهمید که چیست.
    ساختار تب ها در Html بسیار ساده است. ظرف دیوی اولیه، بسته نرم افزاری

    ، که فعلاً محتوای خاصی در آن پنهان است. همه! هیچ چیز اضافی، بدون کتابخانه های js، هیچ فایل تصویری اضافی در طراحی، ظاهر برگه ها و همچنین عملکرد آنها، تنها توسط CSS شکل می گیرد. البته استفاده از استانداردهای جدید CSS3 بدون استثنا عملکرد پایدار را در همه مرورگرها تضمین نمی کند، اما در نسخه های مدرن، تب ها به خوبی کار می کنند. IE-shka برگه ها را از نسخه نهم به درستی نمایش می دهد. بنابراین اگر نسبت به روان و احساسات کاربرانی که سرسختانه روی نسخه‌های قدیمی‌تر این «مرورگر» نشسته‌اند بی‌تفاوت نیستید، بهتر است از این روش ایجاد تب استفاده نکنید، بلکه از jQuery استفاده کنید.

    HTML

    < div class = "tabs" > < input id= "tab1" type= "radio" name= "tabs" checked> < label for = "tab1" title= "برگه 1" >برگه 1 < input id= "tab2" type= "radio" name= "tabs" > < label for = "tab2" title= "برگه 2" >برگه 2 < input id= "tab3" type= "radio" name= "tabs" > < label for = "tab3" title= "برگه 3" >برگه 3 < input id= "tab4" type= "radio" name= "tabs" > < label for = "tab4" title= "برگه 4" >برگه 4 < section id= "content-tab1" > < p> < section id= "content-tab2" > < p> < section id= "content-tab3" > < p>هر مطلبی را اینجا ارسال کنید... < section id= "content-tab4" > < p>هر مطلبی را اینجا ارسال کنید...

    برای سازماندهی بلوک ها با محتوا، از تگ استفاده کردم

    از قفس HTML5، که در بیشتر موارد برای تقسیم یک سند به بخش هایی که از نظر معنا و محتوا متفاوت هستند، با قابلیت استفاده از سرفصل های سطح اول خود استفاده می شود.

    .
    تغییر برگه از طریق تعامل ویژگی علامت زده شده در تگ انجام می شود و شبه کلاس: بررسی شده است، به طور محکم از طریق شناسه های CSS جفت شده است. در پردازش این روش، ترمز پیشرفت قدیمی و معروف اینترنت اکسپلورر 8 به زمین می خورد، از نسخه نهم همه چیز به بهترین شکل ممکن کار می کند.

    به آرامی، به جالب ترین قسمت رسیدیم، به استایل کردن تب ها با استفاده از جادوی CSS. در اینجا همه چیز ساده تر است، توضیح دادن به طور خاص هر ویژگی و پارامترها معنی ندارد، من توضیحاتی را در کدهای منبع نوشتم، بنابراین فکر می کنم فهمیدن اینکه کجا و چرا مشکل نیست، اما اگر سوالی دارید، یا خطا پیدا کنید، در نظرات بنویسید، من قطعا پاسخ خواهم داد و کمک خواهم کرد.

    CSS3

    /* محفظه زبانه پایه */. برگه ها ( حداقل عرض: 320 پیکسل؛ حداکثر عرض: 800 پیکسل؛ بالشتک: 0 پیکسل؛ حاشیه: 0 خودکار؛ ) /* بخش های سبک با محتوا */. Tabs> بخش (نمایش: هیچ‌کدام؛ بالشتک: 15 پیکسل؛ پس‌زمینه: #fff؛ حاشیه: 1px جامد #ddd؛ ) . tabs> section> p ( حاشیه: 0 0 5px؛ ارتفاع خط: 1.5 ؛ رنگ: #383838; /* انیمیشن را پیچ کنید */-webkit-انیمیشن مدت زمان: 1 ثانیه; انیمیشن- مدت زمان: 1 ثانیه; -webkit-animation-fill-mode: هر دو. حالت انیمیشن پر کردن: هر دو. -webkit-animation-name: fadeIn; انیمیشن-نام: fadeIn; ) /* انیمیشن ویژگی opacity را توضیح دهید */@- webkit- فریم های کلیدی fadeIn ( از ( کدورت: 0 ; ) تا ( کدورت: 1 ; ) ) @ keyframes fadeIn ( از ( کدورت: 0 ; ) تا ( کدورت: 1 ; )) /* مخفی کردن چک باکس ها */. Tabs> ورودی (نمایش: هیچ، موقعیت: مطلق؛ ) /* سبک های تغییر دهنده برگه */. tabs> label (نمایش: بلوک درون خطی؛ حاشیه: 0 0 - 1 پیکسل؛ بالشتک: 15 پیکسل 25 پیکسل؛ وزن قلم: 600؛ تراز نوشتاری: مرکز؛ رنگ: #aaa؛ حاشیه: 0 پیکسل توپر #ddd؛ عرض حاشیه: 1px 1px 1px 1px؛ پس‌زمینه: #f1f1f1؛ شعاع حاشیه: 3px 3px 0 0 ؛ ) /* فونت نماد از Font Awesome با فرمت یونیکد */. tabs> label: before ( font- family: fontawesome؛ font- weight: normal; margin- right: 10px; ) . tabs> label[ for *= "1" ] : قبل ( محتوا: " \f 19a"; ) . tabs> label[ for *= "2" ] : قبل ( محتوا: " \f 17a"; ) . tabs> label[ for *= "3" ] : قبل ( محتوا: " \f 13b"; ) . tabs> label[ for *= "4" ] : قبل ( محتوا: " \f 13c"; } /* تغییر سبک تغییر دهنده برگه در شناور */. tabs> label: hover (رنگ: #888؛ مکان نما: اشاره گر؛ ) /* سبک های برگه فعال */. Tabs> ورودی: علامت‌گذاری شده+ برچسب (رنگ: #555؛ حاشیه-بالا: 1px جامد #009933؛ حاشیه-پایین: 1px جامد #fff؛ پس‌زمینه: #fff؛ ) /* فعال کردن بخش ها با شبه کلاس: علامت زده شده */ #tab1:checked~#content-tab1, #tab2:checked~#content-tab2, #tab3:checked~#content-tab3, #tab4:checked~#content-tab4 ( display:block; ) /* متن را از دکمه های رادیویی حذف کنید * و نمادها را روی صفحه های کوچک بگذارید */صفحه رسانه @ و (حداکثر عرض: 680 پیکسل) ( . tabs> label (اندازه قلم: 0 ; ) . tabs> label: قبل (حاشیه: 0 ؛ اندازه قلم: 18px؛ )) /* تغییر بالشتک * سوئیچ ها برای صفحه نمایش های کوچک */صفحه رسانه @ و (حداکثر عرض: 400 پیکسل) ( . tabs> label ( padding: 15px; ) )

    /* محفظه برگه اصلی */ .tabs ( حداقل عرض: 320 پیکسل؛ حداکثر عرض: 800 پیکسل؛ بالشتک: 0 پیکسل؛ حاشیه: 0 خودکار؛ ) /* سبک های بخش با محتوا */ .tabs> بخش (نمایش: هیچکدام؛ بالشتک : 15px؛ پس‌زمینه: #fff؛ حاشیه: 1px solid #ddd; ) .tabs>section>p ( حاشیه: 0 0 5px؛ ارتفاع خط: 1.5؛ رنگ: #383838؛ /* انیمیشن را پیچ کنید */ -webkit- animation -duration: 1s; animation-duration: 1s; -webkit-animation-fill-mode: هر دو؛ animation-fill-mode: هر دو؛ -webkit-animation-name: fadeIn; animation-name: fadeIn; ) /* توضیح دهید ویژگی های تیرگی انیمیشن */ @-webkit-keyframes fadeIn ( از ( کدورت: 0; ) به ( کدورت: 1; ) ) @keyframes fadeIn ( از ( کدورت: 0; ) به ( کدورت: 1; ) ) /* پنهان کردن چک باکس ها * / .tabs>input ( نمایش: هیچکدام؛ موقعیت: مطلق؛ ) /* سبک های تغییر دهنده برگه */ .tabs>label (نمایش: بلوک درون خطی؛ حاشیه: 0 0 -1 پیکسل؛ بالشتک: 15 پیکسل 25 پیکسل؛ وزن قلم : 600؛ تراز نوشتاری: مرکز؛ رنگ: #aaa؛ حاشیه: 0px جامد #ddd؛ حاشیه-عرض: 1px 1px 1px 1px. پس زمینه: #f1f1f1; حاشیه-شعاع: 3px 3px 0 0; ) /* قلم عالی فونت نماد یونیکد */ .tabs>label:before ( font-family: fontawesome؛ font-weight: normal; margin-right: 10px; ) .tabs>label:before ( content: "\f19a"; ) .tabs>label:before ( content: "\f17a"; ) .tabs>label:before ( content: "\f13b"; ) .tabs>label:before ( content: "\f13c"; ) /* جستجوگر برگه تغییرات سبک در hover */ .tabs>label:hover ( رنگ: #888؛ مکان نما: اشاره گر؛ ) /* سبک های برگه فعال */ .tabs>input:checked+label ( رنگ: #555؛ حاشیه -بالا: 1px solid #009933; border-bottom: 1px solid #fff; background: #fff; ) /* فعال کردن بخش ها با شبه کلاس:checked */ #tab1:checked~#content-tab1, #tab2:checked~# محتوا- tab2, #tab3:checked~#content-tab3, #tab4:checked~#content-tab4 ( display: block; ) /* متن را از دکمه های رادیویی حذف کنید * و نمادها را روی صفحه نمایش های کوچک نگه دارید */ صفحه رسانه @ و (حداکثر - عرض: 680 پیکسل) ( .tabs>label (اندازه قلم: 0; .tabs>label:before ( حاشیه: 0؛ اندازه قلم: 18 پیکسل؛ ) ) صفحه رسانه و (حداکثر عرض: 400 پیکسل) ( .tabs> برچسب ( padding: 15px; ))

    شما می توانید زبانه ها () را همانطور که دوست دارید تزئین کنید، همه چیز در مثال فقط یک مثال است، دید لحظه ای من از محصول، نه چیز بیشتر. می‌توانید مقادیر یونیکد فونت‌های آیکون مورد نیاز خود را در وب‌سایت توسعه‌دهنده پیدا کنید، برای این کار، به سادگی روی نماد انتخاب‌شده کلیک کنید و کد دیجیتال صادر شده را کپی کنید، چیزی شبیه به این: \f13b.
    لطفاً توجه داشته باشید، هنگامی که اندازه پنجره مرورگر را کاهش می دهید، برگه ها به طور خودکار به اندازه فعلی تا مقدار مشخصی تنظیم می شوند (در مثال 680 پیکسل)، پس از این مقدار، عنوان متن برگه ها ناپدید می شوند، نمادها باقی می مانند. بنابراین، حداکثر فشردگی کل بلوک برگه ها به دست می آید، فقط باید نمادهای مناسب را انتخاب کنید که با معنای محتوای داخل برگه ها مطابقت داشته باشد.

    نمونه‌ای زنده از نحوه کار برگه‌ها، دانلود کد منبع، آزمایش با پارامترها و ایجاد، ایجاد، ایجاد...

    اگر از کار با قالب های انگلیسی زبان خسته شده اید و رویای فرصتی برای استفاده از قالب های زبان روسی را در سر می پرورانید، مطمئناً از یک خبر عالی خوشحال خواهید شد. راه حل های آماده ای که شما نیاز دارید در بازار TemplateMonster ظاهر شده اند. بله، بله، اکنون می توانید بهترین ها را در سایت پیدا کنید. اگر می‌خواهید پروژه آنلاین خود را در حداقل زمان بسازید، قالب‌های محلی دقیقاً همان چیزی است که به آن نیاز دارید. علاوه بر این که متون قالب ها به صورت دستی نوشته شده اند، تمام ابزارهای لازم برای ایجاد یک سایت حرفه ای را دارند.

    با تمام احترام، اندرو

    زبانه هابه نظر من، آنها یکی از بهترین راه حل ها برای ساختار موضوعی اطلاعات و همچنین برای ارائه فشرده محتوا به کاربر در یک صفحه هستند. امروز خواهیم فهمید که چگونه می توان چنین چیز کوچک کاربردی را بدون استفاده از جاوا اسکریپت در HTML و CSS3 به تنهایی ایجاد کرد.

    برای ایجاد زبانه ها از تگ استفاده خواهیم کرد ورودیو انتخابگر CSS :بررسی شد. اول از همه، ما باید نشانه گذاری صفحه را در HTML ایجاد کنیم

    با کلیک بر روی جعبه های رادیویی، تب های مربوطه فعال می شوند. اولین ورودیتنظیم ویژگی بررسی شده=”بررسی شده”، با این کار اولین تب به صورت پیش فرض باز می شود. ما خود جعبه های رادیویی را مخفی می کنیم و برای کلیک بر روی آنها از تگ استفاده می کنیم برچسب. در بلوک .tabs_contما بلوک هایی با برگه هایی خواهیم داشت که محتوا در آنها قرار می گیرد (متن، تصاویر و غیره). تا اینجا همه چیز ساده است.

    حرکت به سمت سبک های CSS

    برگه ها (موقعیت: نسبی؛ حاشیه: 0 خودکار؛ عرض: 800 پیکسل؛ ) برچسب برگه ها (رنگ: #555؛ مکان نما: نشانگر؛ نمایشگر: بلوک؛ شناور: چپ؛ عرض: 150 پیکسل؛ ارتفاع: 45 پیکسل؛ ارتفاع خط: 45 پیکسل ؛ موقعیت: نسبی؛ بالا: 2 پیکسل؛ تراز متن: مرکز؛ ) ورودی .tabs ( موقعیت: مطلق؛ سمت چپ: -9999 پیکسل؛ ) #tab_1:checked ~ #tab_l1, #tab_2:checked ~ #tab_l2, #tab_3:checked ~ #tab_l3 ( پس‌زمینه: #fff؛ رنگ حاشیه: #fff؛ بالا: 0؛ z-index: 3؛ ) .tabs_cont ( پس‌زمینه: #fff؛ موقعیت: نسبی؛ z-index: 2؛ ارتفاع: 230 پیکسل؛ )

    در اینجا ما از استایل ها برای ساخت تگ استفاده می کنیم برچسبعنصر را مسدود کنید و اندازه، مکان و ظاهر آن را تنظیم کنید (شما می توانید سبک های خود را برای پس زمینه و حاشیه ها تنظیم کنید) همانطور که ما نیاز داریم، و همچنین مخفی کنید ورودیاز موقعیت یابی مطلق استفاده می کند.

    بعد همان انتخابگر می آید :بررسی شدکه در ابتدا به آن اشاره کردیم. به عبارت ساده، اگر جعبه رادیو با شناسه #tab_1انتخاب / بررسی شد، سپس استایل‌ها به بلوک اعمال می‌شوند شناسه #tab_l1و غیره به قیاس. در مورد ما، ما سبک ها را به عنوان برگه انتخاب شده اعمال می کنیم. خوب، در پایان استایل ها را با محتوای تب ها روی بلوک قرار می دهیم.

    وظیفه بعدی ما این است که مطمئن شویم برگه های ما می توانند تغییر کنند. برای پیاده سازی این کار، سبک های زیر:

    Tabs_cont > div ( موقعیت: مطلق؛ چپ: -9999 پیکسل؛ بالا: 0؛ کدورت: 0؛ -moz-transition: opacity 0.5s ease-in-out؛ -webkit-transition: opacity 0.5s ease-in-out؛ انتقال : opacity .5s ease-in-out; ) #tab_1:checked ~ .tabs_cont #tab_c1, #tab_2:checked ~ .tabs_cont #tab_c2, #tab_3:checked ~ .tabs_cont #tab_c3 ( موقعیت: static; left: 0; : 1;)

    بیایید ابتدا همه برگه های خود را پنهان کنیم. ساده ترین راه حل استفاده است نمایش: هیچ، اما از آنجایی که ما به صافی نیاز داریم، راه های آسان برای ما نیست، بنابراین استفاده کنید موقعیت: مطلق;ما بلوک های خود را فراتر از مرزهای دید حرکت می کنیم و حتی با استفاده از ویژگی این بلوک را کاملاً شفاف می کنیم کدورت: 0و به تدریج این مقدار را به یک برسانید. ملک به ما کمک می کند تا به صافی دست یابیم انتقالکه در ادامه شرح داده شده است. سپس دوباره از انتخابگر استفاده می کنیم :بررسی شدکه با آن بلوک های مربوط به جعبه های رادیویی انتخاب شده را قابل مشاهده می کنیم.

    همین! پس از کار با سبک ها به تنهایی، می توانید ظاهر را به سلیقه خود تغییر دهید.

    در ادامه می توانید منابع را دانلود کنید.


    درباره یک کد

    Nav Tab

    برگه های ناوبری برای دو فرم.

    پاسخگو: خیر

    وابستگی ها: bootstrap.css

    درباره یک کد

    تب CSS

    مرورگرهای سازگار: کروم، فایرفاکس، اپرا، سافاری

    پاسخگو: بله

    وابستگی ها: -

    درباره یک کد

    زبانه ها

    انتخابگر + عنصر مجاور بعدی را انتخاب می کند. از لحاظ تاریخی، این برای برچسب‌های استایل بسیار جالب بوده است. با شبکه CSS، یک عنصر می تواند در کنار دیگری در نشانه گذاری باشد، اما در جایی کاملاً متفاوت در نمایش. این قلم از یک انتخابگر ورودی ساده: چک شده همراه با تعداد زیادی + "s برای استایل دادن به صفحات مختلف یک میکروسایت خیالی استفاده می کند.

    مرورگرهای سازگار: کروم، اج، فایرفاکس، اپرا، سافاری

    پاسخگو: بله

    وابستگی ها: -

    درباره یک کد

    زبانه های CSS خالص

    نسخه رادیویی تب ها. الزامات: به شناسه های خاص برای CSS متکی نباشید (CSS نباید شناسه های خاصی را بداند)، انعطاف پذیر برای هر تعداد برگه ناشناخته، قابل دسترسی. .

    مرورگرهای سازگار: کروم، اج، فایرفاکس، اپرا، سافاری

    پاسخگو: بله

    وابستگی ها: -

    درباره یک کد

    زبانه های CSS

    زبانه های عمودی CSS خالص.

    مرورگرهای سازگار: کروم، اج، فایرفاکس، اپرا، سافاری

    پاسخگو: خیر

    وابستگی ها: -

    درباره یک کد

    برگه های CSS خالص با نشانگر

    مرورگرهای سازگار: کروم، اج، فایرفاکس، اپرا، سافاری

    پاسخگو: بله

    وابستگی ها: -

    درباره یک کد

    زبانه های انتقال متحرک

    برگه های انتقال متحرک با چک باکس.

    مرورگرهای سازگار: کروم، اج، فایرفاکس، اپرا، سافاری

    پاسخگو: بله

    وابستگی ها: -

    درباره یک کد

    زبانه های رنگی CSS خالص

    بدون برچسب برگه های رنگی CSS خالص.

    مرورگرهای سازگار: کروم، اج، فایرفاکس، اپرا، سافاری

    پاسخگو: بله

    وابستگی ها: -

    درباره یک کد

    فقط زبانه های CSS

    فقط برگه های طراحی متریال CSS.

    مرورگرهای سازگار: کروم، اج، فایرفاکس، اپرا، سافاری

    پاسخگو: بله

    وابستگی ها: -

    درباره یک کد

    زبانه های CSS3

    برگه های CSS3 خالص پاسخگو توسط Sorax.

    مرورگرهای سازگار: کروم، اج، فایرفاکس، اپرا، سافاری

    پاسخگو: بله

    وابستگی ها: -

    درباره یک کد

    کنترل های برگه با استفاده از HTML و CSS

    کلیک کردن بر روی برچسب ها عملاً مانند کلیک بر روی جعبه های ورودی است. ورودی های رادیویی با CSS پنهان می شوند. وقتی رادیویی انتخاب می‌شود، همسایگان محتوای برگه کنجکاو آن‌ها ظاهر می‌شوند. تنها اشکال این است که نمی‌توانید برگه انتخاب شده را بدون استفاده از JS استایل دهید، اما این نباید مشکل بزرگی باشد.

    مرورگرهای سازگار: کروم، اج، فایرفاکس، اپرا، سافاری

    پاسخگو: بله

    وابستگی ها: -

    درباره یک کد

    زبانه های CSS خالص

    فقط HTML و CSS.

    مرورگرهای سازگار: کروم، اج، فایرفاکس، اپرا، سافاری

    بیشتر بخوانید: