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

شروع موضوع توسط hostcode ‏22/10/2018 در انجمن سایر موضوعات

  1.  

    hostcode کاربر جدید کاربر انجمن

    تاریخ عضویت:
    ‏02/07/2017
    ارسال ها:
    56
    تشکر شده:
    0
    امتیاز:
    6
    جنسیت:
    زن
    محتوای خود را با شمارنده های CSS سازماندهی کنید
    آموزش طراحی سایت



    [​IMG]

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

    خوب، اجازه بدهید به شما یک راز بگویم:


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

    CSS counter برای صرفه جویی در این قضیه کاربرد دارد. این ویژگی بسیار ناشناخته است اما به ما اجازه می دهد یک شمارش ساده از طریق CSS انجام دهیم و با هر شمارش ویژگی متمایزی برای هر دو المان مجاور ایچاد کند در ساده ارین حالت مثلا المان های زوج سفید و المان هایی با شماره فرد سیاه باشند. بهتر است دموی زیر را ببینید: D


    نسخه ی نمایشی را مشاهده کنید . و یا فایل کد را دانلود کنید

    مقالات مرتبط
    [​IMG]
    چگونگی طراحی فرم ها و اشکال در CSS

    [​IMG]
    در 10 دقیقه با فتوشاپ یک طرح تایپوگرافی زیبا ایجاد کنید

    [​IMG]
    ایجاد بازتاب آینه ای با استفاده از CSS و Reflection.js
     
    #1