أنماط قائمة CSS إعادة تعريف الجمال في تصميم الويب

مرحبًا بكم في مجموعتنا من أنماط قائمة CSS! في هذه المجموعة الشاملة، قمنا بتنظيم مجموعة متنوعة من أمثلة أكواد HTML وCSS المجانية التي تعرض الإبداع والتنوع في أنماط القائمة.

يسعدنا أن نقدم سبعة إضافات جديدة إلى مجموعتنا، مما يضمن لك الوصول إلى أحدث وأكثر تصميمات أنماط القائمة ابتكارًا المتاحة. تتميز مجموعتنا بمجموعة واسعة من أنماط القائمة، كل منها تم اختياره يدويًا لجاذبيته البصرية الفريدة وقدرته على تحسين عرض المحتوى.

تعد القوائم عنصرًا أساسيًا في تصميم الويب، حيث توفر طريقة منظمة ومنظمة لعرض المعلومات. ومع ذلك، باستخدام نمط CSS الصحيح، يمكن للقوائم أن تتجاوز مظهرها التقليدي وتصبح عناصر جذابة بصريًا تجذب المستخدمين وتسعدهم.

يوضح كل مثال لنمط قائمة CSS في مجموعتنا قوة CSS في تحويل القوائم العادية إلى مكونات مذهلة بصريًا وتفاعلية. من النقاط الأنيقة والرموز المخصصة إلى التحولات المتحركة والتخطيطات الفريدة، تقدم مجموعتنا مجموعة كبيرة من الاحتمالات لرفع مستوى الجاذبية البصرية لقوائمك. ابدأ في استكشاف مجموعتنا الآن واكتشف الاحتمالات اللامحدودة لرفع مستوى تصميمات قائمتك بقوة CSS.

الكود الاول

الكود يتكون من (3) اجزاء رئيسيين: HTML و CSSو وعرض الكود والمعاينة . سأشرح كل جزء بالتفصيل حتى تفهم كيفية عمل هذا الكود.

الجزء الخاص بـ HTML


<div>
  <ol class="steps-1">
    <li>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Dignissim sodales ut eu sem integer vitae justo. Aliquet sagittis id consectetur purus ut faucibus pulvinar elementum.</li>
    <li>Nulla facilisi etiam dignissim diam quis enim. Dictum non consectetur a erat nam at lectus urna duis. Tristique magna sit amet purus gravida quis blandit turpis. Etiam non quam lacus suspendisse. Odio eu feugiat pretium nibh ipsum consequat nisl.</li>
    <li>Sit amet purus gravida quis blandit turpis. Placerat orci nulla pellentesque dignissim. Sollicitudin tempor id eu nisl nunc mi ipsum. Pharetra et ultrices neque ornare aenean euismod elementum nisi quis. In nisl nisi scelerisque eu ultrices vitae auctor eu augue.</li>
    <li>Mauris cursus mattis molestie a iaculis at erat pellentesque adipiscing. Scelerisque fermentum dui faucibus in ornare. Ornare arcu odio ut sem. Viverra nam libero justo laoreet sit amet. Amet justo donec enim diam. Vestibulum lectus mauris ultrices eros in cursus.</li>
  </ol>
</div>

شرح الجزء HTML:

يتم استخدام <ol> (Ordered List) لإنشاء قائمة مرقمة.
كل عنصر <li> يمثل عنصرًا في القائمة.
تم إضافة نص وهمي (Lorem Ipsum) داخل كل <li> كنص تجريبي.
تم إضافة كلاس steps-1 إلى <ol> لتطبيق التنسيقات المحددة في CSS.

الجزء الخاص بـ CSS


<style type="text/css">
.steps-1 {
    list-style-type: none; /* إزالة الترقيم الافتراضي للقائمة */
    counter-reset: num; /* إعادة تعيين العداد لبدء الترقيم من الصفر */
    margin: 0px 60px 0 0px; /* هوامش خارجية: أعلى، يمين، أسفل، يسار */
    padding: 15px 0 5px 0; /* هوامش داخلية: أعلى، يمين، أسفل، يسار */
    font-size: 16px; /* حجم الخط */
    position: relative; /* تحديد الوضع النسبي للعنصر */
}
.steps-1 li {
    position: relative; /* تحديد الوضع النسبي لعناصر القائمة */
    margin: 0 0 0 0; /* هوامش خارجية: أعلى، يمين، أسفل، يسار */
    padding: 0 0 10px 0; /* هوامش داخلية: أعلى، يمين، أسفل، يسار */
    line-height: 1.4; /* ارتفاع السطر */
    text-align: justify; /* محاذاة النص */
}
.steps-1 li:before {
    content: counter(num); /* إظهار قيمة العداد */
    counter-increment: num; /* زيادة قيمة العداد بمقدار 1 */
    display: inline-block; /* جعل العنصر كتلة داخلية */
    position: absolute; /* تحديد الوضع المطلق للعنصر */
    top: 0; /* تحديد المسافة من الأعلى */
    right: -59px; /* تحديد المسافة من اليمين */
    width: 28px; /* عرض العنصر */
    height: 28px; /* ارتفاع العنصر */
    background: #fff; /* لون الخلفية */
    color: #000; /* لون النص */
    text-align: center; /* محاذاة النص إلى الوسط */
    line-height: 28px; /* ارتفاع السطر */
    font-size: 18px; /* حجم الخط */
    border-radius: 50%; /* جعل العنصر دائريًا */
    border: 1px solid #ef6780; /* إضافة إطار */
}
/* الخط العمودي */
.steps-1:before {
    content: ''; /* إضافة محتوى فارغ */
    position: absolute; /* تحديد الوضع المطلق للعنصر */
    top: 15px; /* تحديد المسافة من الأعلى */
    bottom: 15px; /* تحديد المسافة من الأسفل */
    right: -12px; /* تحديد المسافة من اليمين */
    width: 1px; /* عرض الخط */
    border-left: 1px solid #ef6780; /* إضافة خط عمودي */
}
</style>

شرح الجزء CSS:

.steps-1:
- list-style-type: none;: يزيل الترقيم الافتراضي للقائمة.
- counter-reset: num;: يعيد تعيين العداد لبدء الترقيم من الصفر.
- margin و padding: تحدد الهوامش الخارجية والداخلية للقائمة.
- position: relative;: يجعل العنصر في وضع نسبي لتحديد موقع العناصر الداخلية بدقة.
.steps-1 li:
- position: relative;: يجعل كل عنصر <li> في وضع نسبي.
- padding: يضيف مسافة داخلية أسفل كل عنصر.
- line-height: يحدد ارتفاع السطر.
- text-align: justify;: يجعل النص مبررًا (متساويًا من الجانبين).
.steps-1 li:before:
- content: counter(num);: يعرض قيمة العداد.
- counter-increment: num;: يزيد قيمة العداد بمقدار 1 لكل عنصر.
- display: inline-block;: يجعل العنصر كتلة داخلية.
- position: absolute;: يحدد موقع العنصر بدقة.
- top و right: تحدد موقع العنصر بالنسبة للعنصر الأب.
- width و height: تحدد حجم العنصر.
- background و color: تحدد لون الخلفية والنص.
- border-radius: 50%;: يجعل العنصر دائريًا.
- border: يضيف إطارًا حول العنصر.
.steps-1:before:
- content: '';: يضيف محتوى فارغًا.
- position: absolute;: يحدد موقع الخط العمودي بدقة.
- top و bottom: تحدد طول الخط العمودي.
- right: تحدد موقع الخط من اليمين.
- border-left: 1px solid #ef6780;: يرسم خطًا عموديًا.

معاينة
1. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Dignissim sodales ut eu sem integer vitae justo. Aliquet sagittis id consectetur purus ut faucibus pulvinar elementum.
2. Nulla facilisi etiam dignissim diam quis enim. Dictum non consectetur a erat nam at lectus urna duis. Tristique magna sit amet purus gravida quis blandit turpis. Etiam non quam lacus suspendisse. Odio eu feugiat pretium nibh ipsum consequat nisl.
3. Sit amet purus gravida quis blandit turpis. Placerat orci nulla pellentesque dignissim. Sollicitudin tempor id eu nisl nunc mi ipsum. Pharetra et ultrices neque ornare aenean euismod elementum nisi quis. In nisl nisi scelerisque eu ultrices vitae auctor eu augue.
4. Mauris cursus mattis molestie a iaculis at erat pellentesque adipiscing. Scelerisque fermentum dui faucibus in ornare. Ornare arcu odio ut sem. Viverra nam libero justo laoreet sit amet. Amet justo donec enim diam. Vestibulum lectus mauris ultrices eros in cursus.

الكود


<ol class="steps-1">
	<li>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Dignissim sodales ut eu sem integer vitae justo. Aliquet sagittis id consectetur purus ut faucibus pulvinar elementum.</li>
	<li>Nulla facilisi etiam dignissim diam quis enim. Dictum non consectetur a erat nam at lectus urna duis. Tristique magna sit amet purus gravida quis blandit turpis. Etiam non quam lacus suspendisse. Odio eu feugiat pretium nibh ipsum consequat nisl.</li>
	<li>Sit amet purus gravida quis blandit turpis. Placerat orci nulla pellentesque dignissim. Sollicitudin tempor id eu nisl nunc mi ipsum. Pharetra et ultrices neque ornare aenean euismod elementum nisi quis. In nisl nisi scelerisque eu ultrices vitae auctor eu augue.</li>
	<li>Mauris cursus mattis molestie a iaculis at erat pellentesque adipiscing. Scelerisque fermentum dui faucibus in ornare. Ornare arcu odio ut sem. Viverra nam libero justo laoreet sit amet. Amet justo donec enim diam. Vestibulum lectus mauris ultrices eros in cursus.</li>
</ol>


<style type="text/css">
.steps-1 {
    list-style-type: none;
    counter-reset: num;
    margin: 0px 60px 0 0px;
    padding: 15px 0 5px 0;
    font-size: 16px;
    position: relative; 	
}
.steps-1 li {
	position: relative;	
	margin: 0 0 0 0;
	padding: 0 0 10px 0;
	line-height: 1.4;
    text-align: justify;
}
.steps-1 li:before {
	content: counter(num);
    counter-increment: num;
    display: inline-block;
    position: absolute;
    top: 0;
    right: -59px;
    width: 28px;
    height: 28px;
    background: #fff;
    color: #000;
    text-align: center;
    line-height: 28px;
    font-size: 18px;
    border-radius: 50%;
    border: 1px solid #ef6780; 

}
/* Вертикальная линия */
.steps-1:before {
    content: '';
    position: absolute;
    top: 15px;
    bottom: 15px;
    right: -12px;
    width: 1px;
    border-left: 1px solid #ef6780;
}
</style>

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Dignissim sodales ut eu sem integer vitae justo. Aliquet sagittis id consectetur purus ut faucibus pulvinar elementum.
Nulla facilisi etiam dignissim diam quis enim. Dictum non consectetur a erat nam at lectus urna duis. Tristique magna sit amet purus gravida quis blandit turpis. Etiam non quam lacus suspendisse. Odio eu feugiat pretium nibh ipsum consequat nisl.
Sit amet purus gravida quis blandit turpis. Placerat orci nulla pellentesque dignissim. Sollicitudin tempor id eu nisl nunc mi ipsum. Pharetra et ultrices neque ornare aenean euismod elementum nisi quis. In nisl nisi scelerisque eu ultrices vitae auctor eu augue.
Mauris cursus mattis molestie a iaculis at erat pellentesque adipiscing. Scelerisque fermentum dui faucibus in ornare. Ornare arcu odio ut sem. Viverra nam libero justo laoreet sit amet. Amet justo donec enim diam. Vestibulum lectus mauris ultrices eros in cursus.

كيف يعمل الكود؟

يتم إنشاء قائمة مرقمة باستخدام <ol>.
يتم إزالة الترقيم الافتراضي للقائمة باستخدام list-style-type: none;.
يتم استخدام العداد (counter) لإنشاء أرقام مخصصة لكل عنصر في القائمة.
يتم وضع الأرقام داخل دوائر باستخدام border-radius: 50%;.
يتم رسم خط عمودي على يمين القائمة باستخدام :before.

النتيجة النهائية:

ستحصل على قائمة مرقمة بشكل مخصص، حيث يتم عرض الأرقام داخل دوائر، ويوجد خط عمودي على يمين القائمة يربط بين العناصر.

الكود الثاني

الجزء الخاص بـ HTML


<div>
  <ol class="steps-2">
    <li>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Dignissim sodales ut eu sem integer vitae justo. Aliquet sagittis id consectetur purus ut faucibus pulvinar elementum.</li>
    <li>Nulla facilisi etiam dignissim diam quis enim. Dictum non consectetur a erat nam at lectus urna duis. Tristique magna sit amet purus gravida quis blandit turpis. Etiam non quam lacus suspendisse. Odio eu feugiat pretium nibh ipsum consequat nisl.</li>
    <li>Sit amet purus gravida quis blandit turpis. Placerat orci nulla pellentesque dignissim. Sollicitudin tempor id eu nisl nunc mi ipsum. Pharetra et ultrices neque ornare aenean euismod elementum nisi quis. In nisl nisi scelerisque eu ultrices vitae auctor eu augue.</li>
    <li>Mauris cursus mattis molestie a iaculis at erat pellentesque adipiscing. Scelerisque fermentum dui faucibus in ornare. Ornare arcu odio ut sem. Viverra nam libero justo laoreet sit amet. Amet justo donec enim diam. Vestibulum lectus mauris ultrices eros in cursus.</li>
  </ol>
</div>

شرح الجزء HTML:

يتم استخدام <ol> (Ordered List) لإنشاء قائمة مرقمة.
كل عنصر <li> يمثل عنصرًا في القائمة.
تم إضافة نص وهمي (Lorem Ipsum) داخل كل <li> كنص تجريبي.
تم إضافة كلاس steps-2 إلى <ol> لتطبيق التنسيقات المحددة في CSS.

الجزء الخاص بـ CSS


<style type="text/css">
.steps-2 {
  list-style-type: none; /* إزالة الترقيم الافتراضي للقائمة */
  counter-reset: num; /* إعادة تعيين العداد لبدء الترقيم من الصفر */
  margin: 0 45px 0 0px; /* هوامش خارجية: أعلى، يمين، أسفل، يسار */
  padding: 15px 0 5px 0; /* هوامش داخلية: أعلى، يمين، أسفل، يسار */
  font-size: 16px; /* حجم الخط */
}
.steps-2 li {
  position: relative; /* تحديد الوضع النسبي لعناصر القائمة */
  margin: 0 0 0 0; /* هوامش خارجية: أعلى، يمين، أسفل، يسار */
  padding: 0 0 10px 0; /* هوامش داخلية: أعلى، يمين، أسفل، يسار */
  line-height: 1.4; /* ارتفاع السطر */
  text-align: justify; /* محاذاة النص */
}
.steps-2 li:before {
  content: counter(num); /* إظهار قيمة العداد */
  counter-increment: num; /* زيادة قيمة العداد بمقدار 1 */
  display: inline-block; /* جعل العنصر كتلة داخلية */
  position: absolute; /* تحديد الوضع المطلق للعنصر */
  top: 0; /* تحديد المسافة من الأعلى */
  right: -38px; /* تحديد المسافة من اليمين */
  width: 28px; /* عرض العنصر */
  height: 28px; /* ارتفاع العنصر */
  background: #ff0808; /* لون الخلفية */
  color: #ffffff; /* لون النص */
  text-align: center; /* محاذاة النص إلى الوسط */
  line-height: 28px; /* ارتفاع السطر */
  font-size: 18px; /* حجم الخط */
  border-radius: 50%; /* جعل العنصر دائريًا */
  border: 1px solid #ef6780; /* إضافة إطار */
}
</style>

شرح الجزء CSS:

.steps-2:
- list-style-type: none;: يزيل الترقيم الافتراضي للقائمة.
- counter-reset: num;: يعيد تعيين العداد لبدء الترقيم من الصفر.
- margin: يحدد الهوامش الخارجية للقائمة (أعلى، يمين، أسفل، يسار).
- padding: يحدد الهوامش الداخلية للقائمة (أعلى، يمين، أسفل، يسار).
- font-size: يحدد حجم الخط للنص داخل القائمة.
.steps-2 li:
- position: relative;: يجعل كل عنصر <li> في وضع نسبي.
- margin و padding: تحدد الهوامش الخارجية والداخلية لكل عنصر.
- line-height: يحدد ارتفاع السطر.
- text-align: justify;: يجعل النص مبررًا (متساويًا من الجانبين).
.steps-2 li:before:
- content: counter(num);: يعرض قيمة العداد.
- counter-increment: num;: يزيد قيمة العداد بمقدار 1 لكل عنصر.
- display: inline-block;: يجعل العنصر كتلة داخلية.
- position: absolute;: يحدد موقع العنصر بدقة.
- top و right: تحدد موقع العنصر بالنسبة للعنصر الأب.
- width و height: تحدد حجم العنصر.
- background: يحدد لون خلفية العنصر (أحمر في هذا المثال).
- color: يحدد لون النص (أبيض في هذا المثال).
- text-align: center;: يجعل النص في وسط العنصر.
- line-height: يحدد ارتفاع السطر داخل العنصر.
- font-size: يحدد حجم الخط للنص داخل العنصر.
- border-radius: 50%;: يجعل العنصر دائريًا.
- border: يضيف إطارًا حول العنصر.

معاينة
1. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Dignissim sodales ut eu sem integer vitae justo. Aliquet sagittis id consectetur purus ut faucibus pulvinar elementum.
2. Nulla facilisi etiam dignissim diam quis enim. Dictum non consectetur a erat nam at lectus urna duis. Tristique magna sit amet purus gravida quis blandit turpis. Etiam non quam lacus suspendisse. Odio eu feugiat pretium nibh ipsum consequat nisl.
3. Sit amet purus gravida quis blandit turpis. Placerat orci nulla pellentesque dignissim. Sollicitudin tempor id eu nisl nunc mi ipsum. Pharetra et ultrices neque ornare aenean euismod elementum nisi quis. In nisl nisi scelerisque eu ultrices vitae auctor eu augue.
4. Mauris cursus mattis molestie a iaculis at erat pellentesque adipiscing. Scelerisque fermentum dui faucibus in ornare. Ornare arcu odio ut sem. Viverra nam libero justo laoreet sit amet. Amet justo donec enim diam. Vestibulum lectus mauris ultrices eros in cursus.
الكـود


<ol class="steps-2">
	<li>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Dignissim sodales ut eu sem integer vitae justo. Aliquet sagittis id consectetur purus ut faucibus pulvinar elementum.</li>
	<li>Nulla facilisi etiam dignissim diam quis enim. Dictum non consectetur a erat nam at lectus urna duis. Tristique magna sit amet purus gravida quis blandit turpis. Etiam non quam lacus suspendisse. Odio eu feugiat pretium nibh ipsum consequat nisl.</li>
	<li>Sit amet purus gravida quis blandit turpis. Placerat orci nulla pellentesque dignissim. Sollicitudin tempor id eu nisl nunc mi ipsum. Pharetra et ultrices neque ornare aenean euismod elementum nisi quis. In nisl nisi scelerisque eu ultrices vitae auctor eu augue.</li>
	<li>Mauris cursus mattis molestie a iaculis at erat pellentesque adipiscing. Scelerisque fermentum dui faucibus in ornare. Ornare arcu odio ut sem. Viverra nam libero justo laoreet sit amet. Amet justo donec enim diam. Vestibulum lectus mauris ultrices eros in cursus.</li>
</ol>


<style type="text/css">
.steps-2 {
	list-style-type: none; 
	counter-reset: num;
	margin: 0 45px 0 0px;
	padding: 15px 0 5px 0;
	font-size: 16px;
}
.steps-2 li {
	position: relative;	
	margin: 0 0 0 0;
	padding: 0 0 10px 0;
	line-height: 1.4;
    text-align: justify;
}
.steps-2 li:before {
    content: counter(num);
    counter-increment: num;
    display: inline-block;
    position: absolute;
    top: 0;
    right: -38px;
    width: 28px;
    height: 28px;
    background: #ff0808;
    color: #ffffff;
    text-align: center;
    line-height: 28px;
    font-size: 18px;
    border-radius: 50%;
    border: 1px solid #ef6780;
}
</style>

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Dignissim sodales ut eu sem integer vitae justo. Aliquet sagittis id consectetur purus ut faucibus pulvinar elementum.
Nulla facilisi etiam dignissim diam quis enim. Dictum non consectetur a erat nam at lectus urna duis. Tristique magna sit amet purus gravida quis blandit turpis. Etiam non quam lacus suspendisse. Odio eu feugiat pretium nibh ipsum consequat nisl.
Sit amet purus gravida quis blandit turpis. Placerat orci nulla pellentesque dignissim. Sollicitudin tempor id eu nisl nunc mi ipsum. Pharetra et ultrices neque ornare aenean euismod elementum nisi quis. In nisl nisi scelerisque eu ultrices vitae auctor eu augue.
Mauris cursus mattis molestie a iaculis at erat pellentesque adipiscing. Scelerisque fermentum dui faucibus in ornare. Ornare arcu odio ut sem. Viverra nam libero justo laoreet sit amet. Amet justo donec enim diam. Vestibulum lectus mauris ultrices eros in cursus.

كيف يعمل الكود؟

يتم إنشاء قائمة مرقمة باستخدام <ol>.
يتم إزالة الترقيم الافتراضي للقائمة باستخدام list-style-type: none;.
يتم استخدام العداد (counter) لإنشاء أرقام مخصصة لكل عنصر في القائمة.
يتم وضع الأرقام داخل دوائر باستخدام border-radius: 50%;.
يتم تخصيص لون الخلفية للنقاط (background: #ff0808;) ولون النص (color: #ffffff;).

النتيجة النهائية:

ستحصل على قائمة مرقمة بشكل مخصص، حيث يتم عرض الأرقام داخل دوائر حمراء، والنص داخل الدوائر باللون الأبيض. يتم ترقيم العناصر تلقائيًا باستخدام العداد (counter).

الكود الثالث

الجزء الخاص بـ HTML
```
<div>
  <ol class="rqam">
    <li>Lorem ipsum dolor sit amet, consectetur adipiscing elit</li>
    <li>Nulla facilisi etiam dignissim diam quis enim</li>
    <li>Sit amet purus gravida quis blandit turpis</li>
    <li>Mauris cursus mattis molestie a iaculis at erat pellentesque adipiscing</li>
  </ol>
</div>
```
شرح الجزء HTML:
- يتم استخدام <ol> (Ordered List) لإنشاء قائمة مرقمة.
- كل عنصر <li> يمثل عنصرًا في القائمة.
- تم إضافة نص وهمي (Lorem Ipsum) داخل كل <li> كنص تجريبي.
- تم إضافة كلاس rqam إلى <ol> لتطبيق التنسيقات المحددة في CSS.

الجزء الخاص بـ CSS


<style type="text/css">
.rqam {
  list-style-type: none; /* إزالة الترقيم الافتراضي للقائمة */
  counter-reset: num; /* إعادة تعيين العداد لبدء الترقيم من الصفر */
  margin: 0 25px 0 0; /* هوامش خارجية: أعلى، يمين، أسفل، يسار */
  padding: 15px 0 5px 0; /* هوامش داخلية: أعلى، يمين، أسفل، يسار */
  font-size: 18px; /* حجم الخط */
}
.rqam li {
  position: relative; /* تحديد الوضع النسبي لعناصر القائمة */
  margin: 0 0 0 0; /* هوامش خارجية: أعلى، يمين، أسفل، يسار */
  padding: 0 0 10px 0; /* هوامش داخلية: أعلى، يمين، أسفل، يسار */
}
.rqam li:before {
  content: counter(num) '.'; /* إظهار قيمة العداد مع نقطة */
  counter-increment: num; /* زيادة قيمة العداد بمقدار 1 */
  display: inline-block; /* جعل العنصر كتلة داخلية */
  position: absolute; /* تحديد الوضع المطلق للعنصر */
  top: 0px; /* تحديد المسافة من الأعلى */
  right: -22px; /* تحديد المسافة من اليمين */
  width: 20px; /* عرض العنصر */
  color: #ef6780; /* لون النص */
  text-align: right; /* محاذاة النص إلى اليمين */
}
</style>

شرح الجزء CSS:

.rqam:
- list-style-type: none;: يزيل الترقيم الافتراضي للقائمة.
- counter-reset: num;: يعيد تعيين العداد لبدء الترقيم من الصفر.
- margin: يحدد الهوامش الخارجية للقائمة (أعلى، يمين، أسفل، يسار).
- padding: يحدد الهوامش الداخلية للقائمة (أعلى، يمين، أسفل، يسار).
- font-size: يحدد حجم الخط للنص داخل القائمة.
.rqam li:
- position: relative;: يجعل كل عنصر <li> في وضع نسبي.
- margin و padding: تحدد الهوامش الخارجية والداخلية لكل عنصر.
.rqam li:before:
- content: counter(num) '.';: يعرض قيمة العداد مع نقطة بعد الرقم.
- counter-increment: num;: يزيد قيمة العداد بمقدار 1 لكل عنصر.
- display: inline-block;: يجعل العنصر كتلة داخلية.
- position: absolute;: يحدد موقع العنصر بدقة.
- top: يحدد المسافة من الأعلى.
- right: يحدد المسافة من اليمين.
- width: يحدد عرض العنصر.
- color: يحدد لون النص (وردي في هذا المثال).
- text-align: right;: يجعل النص محاذيًا إلى اليمين.

معاينة
1. Lorem ipsum dolor sit amet, consectetur adipiscing elit
2. Nulla facilisi etiam dignissim diam quis enim
3. Sit amet purus gravida quis blandit turpis
4. Mauris cursus mattis molestie a iaculis at erat pellentesque adipiscing

الكود


    <ol class="rqam">
	<li>Lorem ipsum dolor sit amet, consectetur adipiscing elit</li>
	<li>Nulla facilisi etiam dignissim diam quis enim</li>
	<li>Sit amet purus gravida quis blandit turpis</li>
	<li>Mauris cursus mattis molestie a iaculis at erat pellentesque adipiscing</li>
</ol>


    <style type="text/css">
.rqam {
    list-style-type: none;
    counter-reset: num;
    margin: 0 25px 0 0;
    padding: 15px 0 5px 0;
    font-size: 18px;
}
.rqam li {
	position: relative;	
	margin: 0 0 0 0;
	padding: 0 0 10px 0;
}
.rqam li:before {
    content: counter(num) '.';
    counter-increment: num;
    display: inline-block;
    position: absolute;
    top: 0px;
    right: -22px;
    width: 20px;
    color: #ef6780;
    text-align: right;
}
</style>

Lorem ipsum dolor sit amet, consectetur adipiscing elit
Nulla facilisi etiam dignissim diam quis enim
Sit amet purus gravida quis blandit turpis
Mauris cursus mattis molestie a iaculis at erat pellentesque adipiscing

كيف يعمل الكود؟

يتم إنشاء قائمة مرقمة باستخدام <ol>.
يتم إزالة الترقيم الافتراضي للقائمة باستخدام list-style-type: none;.
يتم استخدام العداد (counter) لإنشاء أرقام مخصصة لكل عنصر في القائمة.
يتم وضع الأرقام على يمين النص باستخدام position: absolute; و right.
يتم تخصيص لون النص للأرقام باستخدام color: #ef6780;.

النتيجة النهائية:

ستحصل على قائمة مرقمة بشكل مخصص، حيث يتم عرض الأرقام باللون الوردي على يمين النص، ويتم ترقيم العناصر تلقائيًا باستخدام العداد (counter).

الكود الرابع

الجزء الخاص بـ HTML


<div>
  <ol class="rqam-1">
    <li>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Dignissim sodales ut eu sem integer vitae justo. Aliquet sagittis id consectetur purus ut faucibus pulvinar elementum.</li>
    <li>Nulla facilisi etiam dignissim diam quis enim. Dictum non consectetur a erat nam at lectus urna duis. Tristique magna sit amet purus gravida quis blandit turpis. Etiam non quam lacus suspendisse. Odio eu feugiat pretium nibh ipsum consequat nisl.</li>
    <li>Sit amet purus gravida quis blandit turpis. Placerat orci nulla pellentesque dignissim. Sollicitudin tempor id eu nisl nunc mi ipsum. Pharetra et ultrices neque ornare aenean euismod elementum nisi quis. In nisl nisi scelerisque eu ultrices vitae auctor eu augue.</li>
    <li>Mauris cursus mattis molestie a iaculis at erat pellentesque adipiscing. Scelerisque fermentum dui faucibus in ornare. Ornare arcu odio ut sem. Viverra nam libero justo laoreet sit amet. Amet justo donec enim diam. Vestibulum lectus mauris ultrices eros in cursus.</li>
  </ol>
</div>

شرح الجزء HTML:

يتم استخدام <ol> (Ordered List) لإنشاء قائمة مرقمة.
كل عنصر <li> يمثل عنصرًا في القائمة.
تم إضافة نص وهمي (Lorem Ipsum) داخل كل <li> كنص تجريبي.
تم إضافة كلاس rqam-1 إلى <ol> لتطبيق التنسيقات المحددة في CSS.

الجزء الخاص بـ CSS


<style type="text/css">
.rqam-1 {
  list-style-type: none; /* إزالة الترقيم الافتراضي للقائمة */
  counter-reset: num; /* إعادة تعيين العداد لبدء الترقيم من الصفر */
  margin: 0 60px 0 0; /* هوامش خارجية: أعلى، يمين، أسفل، يسار */
  padding: 15px 0 5px 0; /* هوامش داخلية: أعلى، يمين، أسفل، يسار */
  font-size: 16px; /* حجم الخط */
}
.rqam-1 li {
  position: relative; /* تحديد الوضع النسبي لعناصر القائمة */
  margin: 0 0 0 0; /* هوامش خارجية: أعلى، يمين، أسفل، يسار */
  padding: 0 0 10px 0; /* هوامش داخلية: أعلى، يمين، أسفل، يسار */
  text-align: justify; /* محاذاة النص */
}
.rqam-1 li:before {
  content: counter(num); /* إظهار قيمة العداد */
  counter-increment: num; /* زيادة قيمة العداد بمقدار 1 */
  display: inline-block; /* جعل العنصر كتلة داخلية */
  position: absolute; /* تحديد الوضع المطلق للعنصر */
  top: 7px; /* تحديد المسافة من الأعلى */
  right: -60px; /* تحديد المسافة من اليمين */
  width: 50px; /* عرض العنصر */
  color: #ef6780; /* لون النص */
  text-align: center; /* محاذاة النص إلى الوسط */
  font-size: 40px; /* حجم الخط */
  font-weight: bold; /* سمك الخط */
}
</style>

شرح الجزء CSS:

.rqam-1:
- list-style-type: none;: يزيل الترقيم الافتراضي للقائمة.
- counter-reset: num;: يعيد تعيين العداد لبدء الترقيم من الصفر.
- margin: يحدد الهوامش الخارجية للقائمة (أعلى، يمين، أسفل، يسار).
- padding: يحدد الهوامش الداخلية للقائمة (أعلى، يمين، أسفل، يسار).
- font-size: يحدد حجم الخط للنص داخل القائمة.
.rqam-1 li:
- position: relative;: يجعل كل عنصر <li> في وضع نسبي.
- margin و padding: تحدد الهوامش الخارجية والداخلية لكل عنصر.
- text-align: justify;: يجعل النص مبررًا (متساويًا من الجانبين).
.rqam-1 li:before:
- content: counter(num);: يعرض قيمة العداد.
- counter-increment: num;: يزيد قيمة العداد بمقدار 1 لكل عنصر.
- display: inline-block;: يجعل العنصر كتلة داخلية.
- position: absolute;: يحدد موقع العنصر بدقة.
- top: يحدد المسافة من الأعلى.
- right: يحدد المسافة من اليمين.
- width: يحدد عرض العنصر.
- color: يحدد لون النص (وردي في هذا المثال).
- text-align: center;: يجعل النص في وسط العنصر.
- font-size: يحدد حجم الخط للنص داخل العنصر.
- font-weight: bold;: يجعل النص عريضًا.

معاينة
1. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Dignissim sodales ut eu sem integer vitae justo. Aliquet sagittis id consectetur purus ut faucibus pulvinar elementum.
2. Nulla facilisi etiam dignissim diam quis enim. Dictum non consectetur a erat nam at lectus urna duis. Tristique magna sit amet purus gravida quis blandit turpis. Etiam non quam lacus suspendisse. Odio eu feugiat pretium nibh ipsum consequat nisl.
3. Sit amet purus gravida quis blandit turpis. Placerat orci nulla pellentesque dignissim. Sollicitudin tempor id eu nisl nunc mi ipsum. Pharetra et ultrices neque ornare aenean euismod elementum nisi quis. In nisl nisi scelerisque eu ultrices vitae auctor eu augue.
4. Mauris cursus mattis molestie a iaculis at erat pellentesque adipiscing. Scelerisque fermentum dui faucibus in ornare. Ornare arcu odio ut sem. Viverra nam libero justo laoreet sit amet. Amet justo donec enim diam. Vestibulum lectus mauris ultrices eros in cursus.

الكود


    <ol class="rqam-1">
	<li>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Dignissim sodales ut eu sem integer vitae justo. Aliquet sagittis id consectetur purus ut faucibus pulvinar elementum.</li>
	<li>Nulla facilisi etiam dignissim diam quis enim. Dictum non consectetur a erat nam at lectus urna duis. Tristique magna sit amet purus gravida quis blandit turpis. Etiam non quam lacus suspendisse. Odio eu feugiat pretium nibh ipsum consequat nisl.</li>
	<li>Sit amet purus gravida quis blandit turpis. Placerat orci nulla pellentesque dignissim. Sollicitudin tempor id eu nisl nunc mi ipsum. Pharetra et ultrices neque ornare aenean euismod elementum nisi quis. In nisl nisi scelerisque eu ultrices vitae auctor eu augue.</li>
	<li>Mauris cursus mattis molestie a iaculis at erat pellentesque adipiscing. Scelerisque fermentum dui faucibus in ornare. Ornare arcu odio ut sem. Viverra nam libero justo laoreet sit amet. Amet justo donec enim diam. Vestibulum lectus mauris ultrices eros in cursus.</li>
</ol>


    <style type="text/css">
.rqam-1 {
    list-style-type: none;
    counter-reset: num;
    margin: 0 60px 0 0;
    padding: 15px 0 5px 0;
    font-size: 16px;
}
.rqam-1 li {
    position: relative;
    margin: 0 0 0 0;
    padding: 0 0 10px 0;
    text-align: justify;
}
.rqam-1 li:before {
    content: counter(num);
    counter-increment: num;
    display: inline-block;
    position: absolute;
    top: 7px;
    right: -60px;
    width: 50px;
    color: #ef6780;
    text-align: center;
    font-size: 40px;
    font-weight: bold;
}
</style>

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Dignissim sodales ut eu sem integer vitae justo. Aliquet sagittis id consectetur purus ut faucibus pulvinar elementum.
Nulla facilisi etiam dignissim diam quis enim. Dictum non consectetur a erat nam at lectus urna duis. Tristique magna sit amet purus gravida quis blandit turpis. Etiam non quam lacus suspendisse. Odio eu feugiat pretium nibh ipsum consequat nisl.
Sit amet purus gravida quis blandit turpis. Placerat orci nulla pellentesque dignissim. Sollicitudin tempor id eu nisl nunc mi ipsum. Pharetra et ultrices neque ornare aenean euismod elementum nisi quis. In nisl nisi scelerisque eu ultrices vitae auctor eu augue.
Mauris cursus mattis molestie a iaculis at erat pellentesque adipiscing. Scelerisque fermentum dui faucibus in ornare. Ornare arcu odio ut sem. Viverra nam libero justo laoreet sit amet. Amet justo donec enim diam. Vestibulum lectus mauris ultrices eros in cursus.

كيف يعمل الكود؟

يتم إنشاء قائمة مرقمة باستخدام <ol>.
يتم إزالة الترقيم الافتراضي للقائمة باستخدام list-style-type: none;.
يتم استخدام العداد (counter) لإنشاء أرقام مخصصة لكل عنصر في القائمة.
يتم وضع الأرقام على يمين النص باستخدام position: absolute; و right.
يتم تخصيص لون النص للأرقام باستخدام color: #ef6780;.
يتم تكبير حجم الخط للأرقام باستخدام font-size: 40px; وجعله عريضًا باستخدام font-weight: bold;.

النتيجة النهائية:

ستحصل على قائمة مرقمة بشكل مخصص، حيث يتم عرض الأرقام باللون الوردي على يمين النص، ويتم ترقيم العناصر تلقائيًا باستخدام العداد (counter). الأرقام كبيرة وعريضة، مما يعطيها مظهرًا بارزًا.

الكود الخامس

الجزء الخاص بـ HTML


<div>
  <ol class="rqam-2">
    <li>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Dignissim sodales ut eu sem integer vitae justo. Aliquet sagittis id consectetur purus ut faucibus pulvinar elementum.</li>
    <li>Nulla facilisi etiam dignissim diam quis enim. Dictum non consectetur a erat nam at lectus urna duis. Tristique magna sit amet purus gravida quis blandit turpis. Etiam non quam lacus suspendisse. Odio eu feugiat pretium nibh ipsum consequat nisl.</li>
    <li>Sit amet purus gravida quis blandit turpis. Placerat orci nulla pellentesque dignissim. Sollicitudin tempor id eu nisl nunc mi ipsum. Pharetra et ultrices neque ornare aenean euismod elementum nisi quis. In nisl nisi scelerisque eu ultrices vitae auctor eu augue.</li>
    <li>Mauris cursus mattis molestie a iaculis at erat pellentesque adipiscing. Scelerisque fermentum dui faucibus in ornare. Ornare arcu odio ut sem. Viverra nam libero justo laoreet sit amet. Amet justo donec enim diam. Vestibulum lectus mauris ultrices eros in cursus.</li>
  </ol>
</div>

شرح الجزء HTML:

يتم استخدام <ol> (Ordered List) لإنشاء قائمة مرقمة.
كل عنصر <li> يمثل عنصرًا في القائمة.
تم إضافة نص وهمي (Lorem Ipsum) داخل كل <li> كنص تجريبي.
تم إضافة كلاس rqam-2 إلى <ol> لتطبيق التنسيقات المحددة في CSS.

الجزء الخاص بـ CSS


<style type="text/css">
.rqam-2 {
  list-style-type: none; /* إزالة الترقيم الافتراضي للقائمة */
  counter-reset: num; /* إعادة تعيين العداد لبدء الترقيم من الصفر */
  margin: 0 45px 0 0px; /* هوامش خارجية: أعلى، يمين، أسفل، يسار */
  padding: 15px 0 5px 0; /* هوامش داخلية: أعلى، يمين، أسفل، يسار */
  font-size: 16px; /* حجم الخط */
}
.rqam-2 li {
  position: relative; /* تحديد الوضع النسبي لعناصر القائمة */
  margin: 0 0 0 0; /* هوامش خارجية: أعلى، يمين، أسفل، يسار */
  padding: 0 0 10px 0; /* هوامش داخلية: أعلى، يمين، أسفل، يسار */
  line-height: 1.4; /* ارتفاع السطر */
  text-align: justify; /* محاذاة النص */
}
.rqam-2 li:before {
  content: counter(num); /* إظهار قيمة العداد */
  counter-increment: num; /* زيادة قيمة العداد بمقدار 1 */
  display: inline-block; /* جعل العنصر كتلة داخلية */
  position: absolute; /* تحديد الوضع المطلق للعنصر */
  top: 2px; /* تحديد المسافة من الأعلى */
  right: -38px; /* تحديد المسافة من اليمين */
  width: 28px; /* عرض العنصر */
  height: 28px; /* ارتفاع العنصر */
  background: rgb(255, 119, 0); /* لون الخلفية */
  color: #fff; /* لون النص */
  text-align: center; /* محاذاة النص إلى الوسط */
  line-height: 28px; /* ارتفاع السطر */
  font-size: 18px; /* حجم الخط */
}
</style>

شرح الجزء CSS:

.rqam-2:
- list-style-type: none;: يزيل الترقيم الافتراضي للقائمة.
- counter-reset: num;: يعيد تعيين العداد لبدء الترقيم من الصفر.
- margin: يحدد الهوامش الخارجية للقائمة (أعلى، يمين، أسفل، يسار).
- padding: يحدد الهوامش الداخلية للقائمة (أعلى، يمين، أسفل، يسار).
- font-size: يحدد حجم الخط للنص داخل القائمة.
.rqam-2 li:
- position: relative;: يجعل كل عنصر <li> في وضع نسبي.
- margin و padding: تحدد الهوامش الخارجية والداخلية لكل عنصر.
- line-height: يحدد ارتفاع السطر.
- text-align: justify;: يجعل النص مبررًا (متساويًا من الجانبين).
.rqam-2 li:before:
- content: counter(num);: يعرض قيمة العداد.
- counter-increment: num;: يزيد قيمة العداد بمقدار 1 لكل عنصر.
- display: inline-block;: يجعل العنصر كتلة داخلية.
- position: absolute;: يحدد موقع العنصر بدقة.
- top: يحدد المسافة من الأعلى.
- right: يحدد المسافة من اليمين.
- width و height: تحدد حجم العنصر.
- background: يحدد لون خلفية العنصر (برتقالي في هذا المثال).
- color: يحدد لون النص (أبيض في هذا المثال).
- text-align: center;: يجعل النص في وسط العنصر.
- line-height: يحدد ارتفاع السطر داخل العنصر.
- font-size: يحدد حجم الخط للنص داخل العنصر.

معــايــنة
1. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Dignissim sodales ut eu sem integer vitae justo. Aliquet sagittis id consectetur purus ut faucibus pulvinar elementum.
2. Nulla facilisi etiam dignissim diam quis enim. Dictum non consectetur a erat nam at lectus urna duis. Tristique magna sit amet purus gravida quis blandit turpis. Etiam non quam lacus suspendisse. Odio eu feugiat pretium nibh ipsum consequat nisl.
3. Sit amet purus gravida quis blandit turpis. Placerat orci nulla pellentesque dignissim. Sollicitudin tempor id eu nisl nunc mi ipsum. Pharetra et ultrices neque ornare aenean euismod elementum nisi quis. In nisl nisi scelerisque eu ultrices vitae auctor eu augue.
4. Mauris cursus mattis molestie a iaculis at erat pellentesque adipiscing. Scelerisque fermentum dui faucibus in ornare. Ornare arcu odio ut sem. Viverra nam libero justo laoreet sit amet. Amet justo donec enim diam. Vestibulum lectus mauris ultrices eros in cursus.

الكود


<ol  class="rqam-2">
	<li>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Dignissim sodales ut eu sem integer vitae justo. Aliquet sagittis id consectetur purus ut faucibus pulvinar elementum.</li>
	<li>Nulla facilisi etiam dignissim diam quis enim. Dictum non consectetur a erat nam at lectus urna duis. Tristique magna sit amet purus gravida quis blandit turpis. Etiam non quam lacus suspendisse. Odio eu feugiat pretium nibh ipsum consequat nisl.</li>
	<li>Sit amet purus gravida quis blandit turpis. Placerat orci nulla pellentesque dignissim. Sollicitudin tempor id eu nisl nunc mi ipsum. Pharetra et ultrices neque ornare aenean euismod elementum nisi quis. In nisl nisi scelerisque eu ultrices vitae auctor eu augue.</li>
	<li>Mauris cursus mattis molestie a iaculis at erat pellentesque adipiscing. Scelerisque fermentum dui faucibus in ornare. Ornare arcu odio ut sem. Viverra nam libero justo laoreet sit amet. Amet justo donec enim diam. Vestibulum lectus mauris ultrices eros in cursus.</li>
</ol>


<style type="text/css">
.rqam-2 {
    list-style-type: none;
    counter-reset: num;
    margin: 0 45px 0 0px;
    padding: 15px 0 5px 0;
    font-size: 16px;
}
.rqam-2 li {
    position: relative;
    margin: 0 0 0 0;
    padding: 0 0 10px 0;
    line-height: 1.4;
    text-align: justify;
}
.rqam-2 li:before {
    content: counter(num);
    counter-increment: num;
    display: inline-block;
    position: absolute;
    top: 2px;
    right: -38px;
    width: 28px;
    height: 28px;
    background: rgb(255, 119, 0);
    color: #fff;
    text-align: center;
    line-height: 28px;
    font-size: 18px;
}
</style>

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Dignissim sodales ut eu sem integer vitae justo. Aliquet sagittis id consectetur purus ut faucibus pulvinar elementum.
Nulla facilisi etiam dignissim diam quis enim. Dictum non consectetur a erat nam at lectus urna duis. Tristique magna sit amet purus gravida quis blandit turpis. Etiam non quam lacus suspendisse. Odio eu feugiat pretium nibh ipsum consequat nisl.
Sit amet purus gravida quis blandit turpis. Placerat orci nulla pellentesque dignissim. Sollicitudin tempor id eu nisl nunc mi ipsum. Pharetra et ultrices neque ornare aenean euismod elementum nisi quis. In nisl nisi scelerisque eu ultrices vitae auctor eu augue.
Mauris cursus mattis molestie a iaculis at erat pellentesque adipiscing. Scelerisque fermentum dui faucibus in ornare. Ornare arcu odio ut sem. Viverra nam libero justo laoreet sit amet. Amet justo donec enim diam. Vestibulum lectus mauris ultrices eros in cursus.

كيف يعمل الكود؟

يتم إنشاء قائمة مرقمة باستخدام <ol>.
يتم إزالة الترقيم الافتراضي للقائمة باستخدام list-style-type: none;.
يتم استخدام العداد (counter) لإنشاء أرقام مخصصة لكل عنصر في القائمة.
يتم وضع الأرقام داخل مربعات برتقالية باستخدام background: rgb(255, 119, 0);.
يتم تخصيص لون النص للأرقام باستخدام color: #fff;.

النتيجة النهائية:

ستحصل على قائمة مرقمة بشكل مخصص، حيث يتم عرض الأرقام داخل مربعات برتقالية على يمين النص، ويتم ترقيم العناصر تلقائيًا باستخدام العداد (counter). الأرقام بيضاء اللون وتظهر بشكل بارز داخل المربعات البرتقالية.

الكود السادس

الجزء الخاص بـ HTML


<div>
  <ul class="rqam-3">
    <li>
      <p>في هذه الحالة، ستكون النعومة هي نفسها الموجودة في المثال، ولكن ستكون هناك فجوات أو تمرير في الوصف، لأن ارتفاع كل كتلة هو نفسه.</p>
    </li>
    <li>
      <p>ستكون النتيجة 1 إلى 1 كما في المثال، فقط سيتعين عليك حساب هذا الارتفاع بالعين.</p>
    </li>
    <li>
      <p>الحل مناسب، ولكن مثل هذه الفتحة قد تسبب قفزة.</p>
    </li>
    <li>
      <p>ستكون النتيجة 1 إلى 1 كما في المثال، فقط سيتعين عليك حساب هذا الارتفاع بالعين.</p>
    </li>
  </ul>
</div>

شرح الجزء HTML:

يتم استخدام <ul> (Unordered List) لإنشاء قائمة غير مرقمة.
كل عنصر <li> يمثل عنصرًا في القائمة.
تم إضافة نص داخل كل <li> باستخدام <p> (فقرة).
تم إضافة كلاس rqam-3 إلى <ul> لتطبيق التنسيقات المحددة في CSS.

الجزء الخاص بـ CSS


<style>
.rqam-3 {
  list-style: none; /* إزالة الترقيم الافتراضي للقائمة */
  counter-reset: li; /* إعادة تعيين العداد لبدء الترقيم من الصفر */
  margin: 0 13px 0 0; /* هوامش خارجية: أعلى، يمين، أسفل، يسار */
  padding: 15px 0 5px 0; /* هوامش داخلية: أعلى، يمين، أسفل، يسار */
  font-size: 16px; /* حجم الخط */
}

.rqam-3 > li {
  position: relative; /* تحديد الوضع النسبي لعناصر القائمة */
  padding: 2px 0 2px 18px; /* هوامش داخلية: أعلى، يمين، أسفل، يسار */
  margin: 4px 0 4px 30px; /* هوامش خارجية: أعلى، يمين، أسفل، يسار */
  transition-duration: 0.3s; /* مدة الانتقال للتأثيرات */
  margin-left: 10px; /* هامش يسار إضافي */
  line-height: 21px; /* ارتفاع السطر */
  font-size: 17px; /* حجم الخط */
  padding: 2px 0 6px 12px; /* هوامش داخلية: أعلى، يمين، أسفل، يسار */
}

.rqam-3 > li:before {
  border: 4px solid #d7d5de; /* إطار حول العنصر */
  line-height: 19px; /* ارتفاع السطر */
  position: absolute; /* تحديد الوضع المطلق للعنصر */
  background: #310dea; /* لون الخلفية */
  top: 8px; /* تحديد المسافة من الأعلى */
  right: -8px; /* تحديد المسافة من اليمين */
  width: 30px; /* عرض العنصر */
  text-align: center; /* محاذاة النص إلى الوسط */
  font-size: 13px; /* حجم الخط */
  font-weight: bold; /* سمك الخط */
  color: #ffffff; /* لون النص */
  counter-increment: li; /* زيادة قيمة العداد بمقدار 1 */
  content: counter(li); /* إظهار قيمة العداد */
  transition-duration: 0.3s; /* مدة الانتقال للتأثيرات */
  box-sizing: border-box; /* تضمين الحشو والحدود في الحجم الكلي */
  border-radius: 5px 5px 5px 5px; /* زوايا دائرية */
}

.rqam-3 li p {
  padding-right: 28px; /* هامش داخلي لليمين */
  margin: 3px; /* هوامش خارجية */
}

@media screen and (min-width: 992px) {
  .rqam-3 > li:after {
    /* يمكن إضافة أنماط إضافية هنا */
  }
  .rqam-3 > li:before {
    /* يمكن إضافة أنماط إضافية هنا */
  }
}
</style>

شرح الجزء CSS:

.rqam-3:
- list-style: none;: يزيل الترقيم الافتراضي للقائمة.
- counter-reset: li;: يعيد تعيين العداد لبدء الترقيم من الصفر.
- margin: يحدد الهوامش الخارجية للقائمة (أعلى، يمين، أسفل، يسار).
- padding: يحدد الهوامش الداخلية للقائمة (أعلى، يمين، أسفل، يسار).
- font-size: يحدد حجم الخط للنص داخل القائمة.
.rqam-3 > li:
- position: relative;: يجعل كل عنصر <li> في وضع نسبي.
- padding و margin: تحدد الهوامش الخارجية والداخلية لكل عنصر.
- transition-duration: 0.3s;: يحدد مدة الانتقال للتأثيرات.
- line-height: يحدد ارتفاع السطر.
- font-size: يحدد حجم الخط للنص داخل العنصر.
.rqam-3 > li:before:
- border: يحدد إطارًا حول العنصر.
- line-height: يحدد ارتفاع السطر داخل العنصر.
- position: absolute;: يحدد موقع العنصر بدقة.
- background: يحدد لون خلفية العنصر (أزرق في هذا المثال).
- top و right: تحدد موقع العنصر بالنسبة للعنصر الأب.
- width: يحدد عرض العنصر.
- text-align: center;: يجعل النص في وسط العنصر.
- font-size: يحدد حجم الخط للنص داخل العنصر.
- font-weight: bold;: يجعل النص عريضًا.
- color: يحدد لون النص (أبيض في هذا المثال).
- counter-increment: li;: يزيد قيمة العداد بمقدار 1 لكل عنصر.
- content: counter(li);: يعرض قيمة العداد.
- transition-duration: 0.3s;: يحدد مدة الانتقال للتأثيرات.
- box-sizing: border-box;: يضمن تضمين الحشو والحدود في الحجم الكلي للعنصر.
- border-radius: يحدد زوايا دائرية للعنصر.
.rqam-3 li p:
- padding-right: يحدد هامشًا داخليًا لليمين.
- margin: يحدد هوامش خارجية.
@media screen and (min-width: 992px):
- يتم تطبيق أنماط إضافية عند عرض الشاشة بعرض 992 بكسل أو أكثر.

مــعايــنة
- في هذه الحالة، ستكون النعومة هي نفسها الموجودة في المثال، ولكن ستكون هناك فجوات أو تمرير في الوصف، لأن ارتفاع كل كتلة هو نفسه.
- ستكون النتيجة 1 إلى 1 كما في المثال، فقط سيتعين عليك حساب هذا الارتفاع بالعين.
- الحل مناسب، ولكن مثل هذه الفتحة قد تسبب قفزة.
- ستكون النتيجة 1 إلى 1 كما في المثال، فقط سيتعين عليك حساب هذا الارتفاع بالعين.

الكود


<ul class="rqam-3">	
<li><p>
	في هذه الحالة، ستكون النعومة هي نفسها الموجودة في المثال، ولكن ستكون هناك فجوات أو تمرير في الوصف، لأن ارتفاع كل كتلة هو نفسه.</p></li>
<li><p>
	ستكون النتيجة 1 إلى 1 كما في المثال، فقط سيتعين عليك حساب هذا الارتفاع بالعين.
</p></li>
<li>
  <p>
	الحل مناسب، ولكن مثل هذه الفتحة قد تسبب قفزة.
</p></li>
<li><p>ستكون النتيجة 1 إلى 1 كما في المثال، فقط سيتعين عليك حساب هذا الارتفاع بالعين.</p> 

</li>
</ul>


<style>
  .rqam-3 {
    list-style: none;
    counter-reset: li;
    list-style-type: none;
    margin: 0 13px 0 0;
    padding: 15px 0 5px 0;
    font-size: 16px;

}	
.rqam-3 > li {
	position: relative;
	padding: 2px 0 2px 18px;
	margin: 4px 0 4px 30px;
	transition-duration: 0.3s;
 	margin-left: 10px;
	line-height: 21px;
	font-size: 17px;
	padding:2px 0 6px 12px;	

}

.rqam-3 > li:before {
    border: 4px solid #d7d5de;
    line-height: 19px;
    position: absolute;
    background: #310dea;
    top: 8px;
    right: -8px;
    width: 30px;
    text-align: center;
    font-size: 13px;
    font-weight: bold;
    color: #ffffff;
    counter-increment: li;
    content: counter(li);
    transition-duration: 0.3s;
    box-sizing: border-box;
    border-radius: 5px 5px 5px 5px;
}
  .rqam-3 li p{
    padding-right: 28px;
    margin: 3px;
  }


@media screen and (min-width: 992px) {
	.rqam-3>li:after {
		/*top: 10px*/
	}
.rqam-3>li:before {	
		/*top:10px;*/
	}
}

</style>

في هذه الحالة، ستكون النعومة هي نفسها الموجودة في المثال، ولكن ستكون هناك فجوات أو تمرير في الوصف، لأن ارتفاع كل كتلة هو نفسه.
ستكون النتيجة 1 إلى 1 كما في المثال، فقط سيتعين عليك حساب هذا الارتفاع بالعين.
الحل مناسب، ولكن مثل هذه الفتحة قد تسبب قفزة.
ستكون النتيجة 1 إلى 1 كما في المثال، فقط سيتعين عليك حساب هذا الارتفاع بالعين.

كيف يعمل الكود؟

يتم إنشاء قائمة غير مرقمة باستخدام <ul>.
يتم إزالة الترقيم الافتراضي للقائمة باستخدام list-style: none;.
يتم استخدام العداد (counter) لإنشاء أرقام مخصصة لكل عنصر في القائمة.
يتم وضع الأرقام داخل مربعات زرقاء باستخدام background: #310dea;.
يتم تخصيص لون النص للأرقام باستخدام color: #ffffff;.
يتم إضافة تأثيرات انتقالية باستخدام transition-duration: 0.3s;.

النتيجة النهائية:

ستحصل على قائمة غير مرقمة بشكل مخصص، حيث يتم عرض الأرقام داخل مربعات زرقاء على يمين النص، ويتم ترقيم العناصر تلقائيًا باستخدام العداد (counter). الأرقام بيضاء اللون وتظهر بشكل بارز داخل المربعات الزرقاء.

الكود السابع

الجزء الخاص بـ HTML


  <div>
  <ul class="metro">
    <li>
      <a href="#">css</a>
      <ul>
        <li><a href="">وحدة المعالجة المركزية Intel</a></li>
        <li><a href="">وحدة المعالجة المركزية Intel</a></li>
        <li><a href="">وحدة المعالجة المركزية Intel</a></li>
      </ul>
    </li>
    <li>
      <a href="">html</a>
      <ul>
        <li><a href="">وحدة المعالجة المركزية Intel</a></li>
        <li><a href="">وحدة المعالجة المركزية Intel</a></li>
        <li><a href="">وحدة المعالجة المركزية Intel</a></li>
      </ul>
    </li>
    <li>
      <a href="">وحدة المعالجة المركزية Intel</a>
    </li>
  </ul>
</div>

يتم استخدام <ul> (Unordered List) لإنشاء قائمة غير مرقمة.
كل عنصر <li> يمثل عنصرًا في القائمة. تم إضافة روابط داخل كل <li> باستخدام <a>.
تم إنشاء قوائم فرعية داخل بعض العناصر باستخدام <ul> متداخلة.
تم إضافة كلاس metro إلى <ul> لتطبيق التنسيقات المحددة في CSS.

الجزء الخاص بـ CSS


  <style>
    .metro {
      list-style: none; /* إزالة الترقيم الافتراضي للقائمة */
      padding: 0; /* إزالة الهوامش الداخلية */
      margin: 0px 11px 0 0px; /* هوامش خارجية: أعلى، يمين، أسفل، يسار */
      border-right: 5px solid #DAE4F1; /* إطار على الجانب الأيمن */
    }

    .metro li {
      line-height: 2em; /* ارتفاع السطر */
    }

    .metro ul {
      margin: 20px 0 20px 15px; /* هوامش خارجية: أعلى، يمين، أسفل، يسار */
      padding: 0; /* إزالة الهوامش الداخلية */
      border: none; /* إزالة الإطار */
      list-style: none; /* إزالة الترقيم الافتراضي للقائمة */
    }

    .metro ul:before,
    .metro ul:after {
      content: ""; /* إضافة محتوى فارغ */
      width: 5px; /* عرض العنصر */
      height: 28px; /* ارتفاع العنصر */
      background: #DAE4F1; /* لون الخلفية */
      position: relative; /* تحديد الوضع النسبي */
      display: block; /* جعل العنصر كتلة */
      left: -5px; /* تحديد المسافة من اليسار */
    }

    .metro ul:before {
      transform: rotate(40deg); /* تدوير العنصر */
      margin-top: -15px; /* تحديد المسافة من الأعلى */
    }

    .metro ul:after {
      transform: rotate(314deg); /* تدوير العنصر */
      bottom: -20px; /* تحديد المسافة من الأسفل */
    }

    .metro ul li {
      border-right: 5px solid #DAE4F1; /* إطار على الجانب الأيمن */
      margin-right: 14px; /* هامش خارجي لليمين */
    }

    .metro ul li:first-child {
      margin-top: -5px; /* هامش خارجي للأعلى */
      padding-top: 5px; /* هامش داخلي للأعلى */
    }

    .metro ul li:last-child {
      padding-bottom: 9px; /* هامش داخلي للأسفل */
      margin-bottom: -25px; /* هامش خارجي للأسفل */
    }

    .metro a {
      text-decoration: none; /* إزالة التزيين من النص */
      display: block; /* جعل العنصر كتلة */
      font-family: 'Noto Sans', sans-serif; /* نوع الخط */
      color: #4A4B4D; /* لون النص */
    }

    .metro a:before {
      content: ""; /* إضافة محتوى فارغ */
      display: inline-block; /* جعل العنصر كتلة داخلية */
      background: #1a26e0; /* لون الخلفية */
      width: 12px; /* عرض العنصر */
      height: 12px; /* ارتفاع العنصر */
      left: 16px; /* تحديد المسافة من اليسار */
      position: relative; /* تحديد الوضع النسبي */
      border-radius: 50%; /* جعل العنصر دائريًا */
      margin-right: 0.5em; /* هامش خارجي لليمين */
    }
  </style>

شرح الجزء CSS:
.metro:
- list-style: none;: يزيل الترقيم الافتراضي للقائمة.
- padding: 0;: يزيل الهوامش الداخلية.
- margin: 0px 11px 0 0px;: يحدد الهوامش الخارجية (أعلى، يمين، أسفل، يسار).
- border-right: 5px solid #DAE4F1;: يضيف إطارًا على الجانب الأيمن.
.metro li:
- line-height: 2em;: يحدد ارتفاع السطر.
.metro ul:
- margin: 20px 0 20px 15px;: يحدد الهوامش الخارجية (أعلى، يمين، أسفل، يسار).
- padding: 0;: يزيل الهوامش الداخلية.
- border: none;: يزيل الإطار.
- list-style: none;: يزيل الترقيم الافتراضي للقائمة.
.metro ul:before و .metro ul:after:
- content: "";: يضيف محتوى فارغ.
- width: 5px;: يحدد عرض العنصر.
- height: 28px;: يحدد ارتفاع العنصر.
- background: #DAE4F1;: يحدد لون الخلفية.
- position: relative;: يحدد الوضع النسبي.
- display: block;: يجعل العنصر كتلة.
- left: -5px;: يحدد المسافة من اليسار.
- transform: rotate(40deg);: يدور العنصر بزاوية 40 درجة.
- transform: rotate(314deg);: يدور العنصر بزاوية 314 درجة.
.metro ul li:
- border-right: 5px solid #DAE4F1;: يضيف إطارًا على الجانب الأيمن.
- margin-right: 14px;: يحدد هامشًا خارجيًا لليمين.
.metro ul li:first-child:
- margin-top: -5px;: يحدد هامشًا خارجيًا للأعلى.
- padding-top: 5px;: يحدد هامشًا داخليًا للأعلى.
.metro ul li:last-child:
- padding-bottom: 9px;: يحدد هامشًا داخليًا للأسفل.
- margin-bottom: -25px;: يحدد هامشًا خارجيًا للأسفل.
.metro a:
- text-decoration: none;: يزيل التزيين من النص.
- display: block;: يجعل العنصر كتلة.
- font-family: 'Noto Sans', sans-serif;: يحدد نوع الخط.
- color: #4A4B4D;: يحدد لون النص.
.metro a:before:
- content: "";: يضيف محتوى فارغ.
- display: inline-block;: يجعل العنصر كتلة داخلية.
- background: #1a26e0;: يحدد لون الخلفية.
- width: 12px;: يحدد عرض العنصر.
- height: 12px;: يحدد ارتفاع العنصر.
- left: 16px;: يحدد المسافة من اليسار.
- position: relative;: يحدد الوضع النسبي.
- border-radius: 50%;: يجعل العنصر دائريًا.
- margin-right: 0.5em;: يحدد هامشًا خارجيًا لليمين.

معاينة

الكود


    <ul class="metro">
                            <li><a href="#">css</a>
                                <ul>
                                    <li><a href="">وحدة المعالجة المركزية Intel</a></li>
                                    <li><a href="">وحدة المعالجة المركزية Intel</a></li>
                                    <li><a href="">وحدة المعالجة المركزية Intel</a></li>
                                </ul>
                            </li>
                            <li><a href="">html</a>
                                <ul>
                                    <li><a href="">وحدة المعالجة المركزية Intel</a></li>
                                    <li><a href="">وحدة المعالجة المركزية Intel</a></li>
                                    <li><a href="">وحدة المعالجة المركزية Intel</a></li>
                                </ul>
                            </li>
                            <li><a href="">Эوحدة المعالجة المركزية Intel</a></li>
                        </ul>


    <style>
  .metro {
    list-style: none;
    padding: 0;
    margin: 0px 11px 0 0px;
    border-right: 5px solid #DAE4F1;
}

.metro li {
    line-height: 2em;
}

.metro ul {
    margin: 20px 0 20px 15px;
    padding: 0;
    border: none;
    list-style: none;
}

.metro ul:before,
.metro ul:after {
    content: "";
    width: 5px;
    height: 28px;
    background: #DAE4F1;
    position: relative;
    display: block;
    left: -5px;
}

.metro ul:before {
    transform: rotate(40deg);
    margin-top: -15px;
}

.metro ul:after {
    transform: rotate(314deg);
    bottom: -20px;
}

.metro ul li {
    border-right: 5px solid #DAE4F1;
    margin-right: 14px;
}

.metro ul li:first-child {
    margin-top: -5px;
    padding-top: 5px;
}

.metro ul li:last-child {
    padding-bottom: 9px;
    margin-bottom: -25px;
}

.metro a {
    text-decoration: none;
    display: block;
    font-family: 'Noto Sans', sans-serif;
    color: #4A4B4D;
}

.metro a:before {
    content: "";
    display: inline-block;
    background: #1a26e0;
    width: 12px;
    height: 12px;
    left: 16px;
    position: relative;
    border-radius: 50%;
    margin-right: 0.5em;
}
</style>

كيف يعمل الكود؟

يتم إنشاء قائمة غير مرقمة باستخدام <ul>.
يتم إزالة الترقيم الافتراضي للقائمة باستخدام list-style: none;.
يتم إضافة روابط داخل كل <li> باستخدام <a>.
يتم إنشاء قوائم فرعية داخل بعض العناصر باستخدام <ul> متداخلة.
يتم تخصيص التنسيقات باستخدام CSS لتطبيق التصميم المطلوب.

النتيجة النهائية:

ستحصل على قائمة غير مرقمة بشكل مخصص، حيث يتم عرض الروابط داخل مربعات زرقاء على يمين النص، ويتم ترقيم العناصر تلقائيًا باستخدام العداد (counter). الأرقام بيضاء اللون وتظهر بشكل بارز داخل المربعات الزرقاء.

استكشف في مدونة أوعي وشك عالم الابتكار

أنماط قائمة CSS إعادة تعريف الجمال في تصميم الويب

الكود الاول

الجزء الخاص بـ HTML

الجزء الخاص بـ CSS

معاينة

الكود

كيف يعمل الكود؟

النتيجة النهائية:

الكود الثاني

الجزء الخاص بـ HTML

الجزء الخاص بـ CSS

معاينة

الكـود

كيف يعمل الكود؟

النتيجة النهائية:

الكود الثالث

الجزء الخاص بـ HTML

الجزء الخاص بـ CSS

معاينة

الكود

كيف يعمل الكود؟

النتيجة النهائية:

الكود الرابع

الجزء الخاص بـ HTML

الجزء الخاص بـ CSS

معاينة

الكود

كيف يعمل الكود؟

النتيجة النهائية:

الكود الخامس

الجزء الخاص بـ HTML

الجزء الخاص بـ CSS

معــايــنة

الكود

كيف يعمل الكود؟

النتيجة النهائية:

الكود السادس

الجزء الخاص بـ HTML

الجزء الخاص بـ CSS

مــعايــنة

الكود

كيف يعمل الكود؟

النتيجة النهائية:

الكود السابع

الجزء الخاص بـ HTML

الجزء الخاص بـ CSS

معاينة

الكود

كيف يعمل الكود؟

النتيجة النهائية:

إرسال تعليق

اذا كنت تبحث اوتبحثين عن عمل اضافي بجانب عملك مقابل مادي اتصل بنا

الدردشة وتساب

إرسال طلب

اوعي وشك