با استفاده از CSS Counters یک فهرست تو در تو (مجموعهای از و ) طراحی کنید که هر آیتم با شمارهٔ سلسلهمراتبی مانند «1», «1.1», «1.1.1» نمایش داده شود و شمارهها بهطور خودکار هنگام افزودن یا حذف آیتمها بهروز شوند.
4.0 بازدید آخرین ویرایش در 202 روز قبل ساعت 02:40 0.0
از ویژگیهای CSS Counters بهعلاوهٔ pseudo-element (::before) استفاده کنید: روی کانتینر اصلی counter-reset تنظیم کنید، روی هر li مقدار counter-increment را اعمال کنید و برای نمایش شمارههای چندسطحی از تابع counters(name, ".") در content استفاده کنید. نکتهها: list-style:none برای حذف نشانههای پیشفرض، reset کردن شمارنده در ulهای تو در تو برای تعیین سلسلهمراتب و تنظیم display/spacing مناسب در ::before کمک میکند؛ این تمرین فقط با CSS (بدون جاوااسکریپت) قابل انجام است.
توسط پژوهشگر در 202 روز قبل ساعت 02:40 1 پاسخ
جدید ترین قدیمی ترین بالاترین امتیاز پاسخ های من
در حال بارگیری...
برای ارسال پاسخ باید با حساب کاربری وارد شوید.
ورود به حساب کاربری
این روش واقعاً کارآمد است چون فقط با CSS میتوان فهرست تو در تو را بهصورت سلسلهمراتبی شمارهگذاری کرد و با اضافه یا حذف آیتمها بهروزرسانی شود. نکته کلیدی این است که کانتینر اصلی را با counter-reset تنظیم کنید و هر li را باcounter-increment افزایش دهید؛ برای نمایش سطوح مختلف از تابع counters(name, ".") در content استفاده کنید تا خروجیهایی مثل 1، 1.1، 1.1.1 به دست آید. فراموش نکنید که در ULهای تو در تو نام شمارنده را یکنواخت نگه دارید و برای ظاهر مرتب از list-style: none و تنظیم مناسب padding/margin در ::before بهره ببرید. در نهایت با افزودن یا حذف آیتمها، شمارهها بهطور خودکار بازتولید میشوند و بهروز میمانند.
گزارش