ومن لايعرف الترقيم... فهي خاصية تمكنك من انشاء قائمة مرقمة شاهد المثال التالي
- 1. هذا مثال كتبته أنت أو أي شئ آخر
- 2. هذا مثال كتبته أنت أو أي شئ آخر
- 3. هذا مثال كتبته أنت أو أي شئ آخر
طريقة التركيب
الشكل الأول
.post ol{counter-reset: li;list-style: none;*list-style: decimal;font: 13px 'trebuchet MS', 'lucida sans'; /* font size of each element */padding: 0;margin-bottom: 4em;text-shadow: 0 1px 0 rgba(255,255,255,.5);font-weight: bold;}.post ol li{position: relative;display: block;padding: .4em 3.4em .4em 4em;margin: 0.5em 0;text-decoration: none;border-radius: 0.3em;transition: all .3s ease-out;}.post ol li:hover:before{transform: rotate(360deg);}.post ol li:before{content: counter(li);counter-increment: li;position: absolute;top: 50%;right: 7px;margin-top: -1.3em;height: 2em;width: 2em;line-height: 2em;color: #fff;background: #FA8022;border: .2em solid #fff;-webkit-box-shadow: 0 8px 5px -7px #888;-moz-box-shadow: 0 8px 5px -7px #888;box-shadow: 0 8px 5px -7px #888;text-align: center;font-weight: bold;border-radius: 2em;transition: all .3s ease-out;}
الشكل الثاني
.post ol{counter-reset:li;list-style: none;*list-style: decimal;margin-left:0;padding-left:0}.post ol li{position: relative;margin: 0 0 20px 15px !important;padding: 8px 5px 5px 10px !important;list-style: none;border-bottom: 1px solid #9A9F9A;background: #AFC33F;text-indent: -2px;color: #FFF;}.post ol li:before{content: counter(li);counter-increment: li;position: absolute;top: -6px;left: -10px;font-family: 'Oswald', serif;font-size: 21px;width: 20px;margin: 0 0 10px 0;padding: 4px !important;color: #FFFFFF;text-align: right;background: #92A36C;text-indent: 6px;}.post ol li:after{content:"";position:absolute;top:-5px;left:17px;width: 0px;height: 0px;border-style: solid;border-width: 5px 0 0 5px;border-color: transparent transparent transparent #aeaeae; /* color of the triangle behind */}
الشكل الثالث
.post ol{counter-reset: li;list-style: none;*list-style: decimal;padding: 0;margin-bottom: 4em;font: 13px 'trebuchet MS', 'lucida sans'; /* font size of each element */text-shadow: 0 1px 0 rgba(255,255,255,.5);}.post ol li{position: relative;display: block;padding: .4em 3.4em .4em .8em;margin: .5em 0 .5em 4.5em;text-decoration: none;}.post ol li:before{content: counter(li);counter-increment: li;position: absolute;right: 6px;top: 50%;margin-top: -1em;background: #bada55;height: 2em;width: 2em;line-height: 2em;text-align: center;font-weight: bold;}.post ol li:after{position: absolute;content: '';right: 31px;margin-top: -0.7em;top: 50%;width: 0;height: 0;border-top: 8px solid transparent;border-bottom: 11px solid transparent;border-right: 8px solid #bada55;}
من فضلك أردت أن أعرف الطريقة التي عندما أضغط على العنوان في تنسيق التعداد الرقمي أو النقطي يأخذني مباشرة إلى التفصيل.
ردحذف