اصنع قوائم تُلهم زوار موقعك باستخدام الأيقونات

هذا الكود هو مثال على كيفية استخدام HTML وCSS لإنشاء قوائم (lists) تحتوي على عناصر نصية وأيقونات. الكود يقوم بإنشاء ثلاث قوائم مختلفة، كل قائمة تحتوي على خمسة عناصر. كل عنصر يتكون من أيقونة ونص.

HTML

يتم استخدام عنصر <ul> لإنشاء قائمة غير مرتبة (unordered list).
كل عنصر في القائمة يتم تمثيله بواسطة <li>.
داخل كل <li>، يتم استخدام <img> لإضافة أيقونة، و<span> لإضافة نص.

CSS Styling:

.list-1, .list-2, .list-3: يتم تطبيق بعض الهوامش والحشوات على القوائم.
.flex: يتم استخدام هذه الفئة لجعل العناصر تظهر في صف واحد (flexbox).
.mt-1, .mt-2, .mt-3: يتم استخدام هذه الفئات لتحديد الهوامش العلوية (margin-top) للعناصر.
.mr-1.5, .mr-2.5, .mr-3.5: يتم استخدام هذه الفئات لتحديد الهوامش اليمنية (margin-right) للعناصر.
.leading-tight: يتم استخدام هذه الفئة لتقليل المسافة بين الأسطر في النص.

الأيقونات:

يتم استخدام عنصر <img> لإضافة أيقونات إلى كل عنصر في القائمة. الأيقونات يتم استرجاعها من رابط خارجي.

أهمية الكود:

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

شرح الكود

هذا الكود يعرض ثلاث قوائم (ul) تحتوي على عناصر (li) مع صور ونصوص. كل قائمة لها فئة مختلفة (list-1, list-2, list-3) وتستخدم أنماط CSS لتخصيص العرض.

الأنماط (CSS)

.list-1 .lbImg::before, .list-2 .lbImg::before, .list-3 .lbImg::before: يتم إخفاء العناصر الزائفة (::before) للعناصر التي تحتوي على فئة lbImg داخل القوائم الثلاث.
.list-1, .list-2, .list-3: يتم إزالة الهوامش (margin) وإضافة حشوة (padding) بقيمة 2 بكسل للقوائم.
.flex: هذه الفئة تستخدم لتطبيق تخطيط Flexbox على العناصر، مما يسمح بترتيب العناصر بشكل مرن.
.mt-1, .mt-2, .mt-3: هذه الفئات تضيف هوامش علوية (margin-top) بقيم مختلفة (1, 2, 3) للعناصر.
.mr-1.5, .mr-2.5, .mr-3.5: هذه الفئات تضيف هوامش يمينية (margin-right) بقيم مختلفة (1.5, 2.5, 3.5) للصور داخل العناصر.
.leading-tight: هذه الفئة تضيف هامشًا يمينيًا (margin-right) بقيمة 13 بكسل للنصوص.

الهيكل (HTML)

<ul class="list-1">: قائمة تحتوي على خمسة عناصر (li). كل عنصر يحتوي على صورة (img) ونص (span).
<ul class="list-2">: قائمة أخرى تحتوي على خمسة عناصر مشابهة للقائمة الأولى ولكن بفئات مختلفة للهوامش.
<ul class="list-3">: قائمة ثالثة تحتوي على خمسة عناصر مشابهة للقوائم السابقة ولكن بفئات مختلفة للهوامش.

الصور والنصوص

الصور (img) يتم تحميلها بشكل كسول (loading="lazy") لتحسين أداء الصفحة.
النصوص (span) تحتوي على كلمات عربية ("مهم", "جيد", "رائع") وتعرض بجانب الصور.

التخطيط

يتم استخدام Flexbox (display: flex) لترتيب العناصر بشكل أفقي، حيث تكون الصورة على اليسار والنص على اليمين. الهوامش العلوية واليمينية تساعد في توفير مسافات بين العناصر.

الكود

 
<ul class="list-1">
	<li class="flex mt-1"><img class="mr-1.5" src="https://api2.kokoc.tech/uploads/Icon_Shapes_26_e2453a4919.svg" alt="svg" loading="lazy"><span class="leading-tight">مهم</span></li>
	<li class="flex mt-1"><img class="mr-1.5" src="https://api2.kokoc.tech/uploads/Icon_Shapes_26_e2453a4919.svg" alt="svg" loading="lazy"><span class="leading-tight">مهم</span></li>
  <li class="flex mt-1"><img class="mr-1.5" src="https://api2.kokoc.tech/uploads/Icon_Shapes_26_e2453a4919.svg" alt="svg" loading="lazy"><span class="leading-tight">مهم</span></li>
  <li class="flex mt-1"><img class="mr-1.5" src="https://api2.kokoc.tech/uploads/Icon_Shapes_26_e2453a4919.svg" alt="svg" loading="lazy"><span class="leading-tight">مهم</span></li>
  <li class="flex mt-1"><img class="mr-1.5" src="https://api2.kokoc.tech/uploads/Icon_Shapes_26_e2453a4919.svg" alt="svg" loading="lazy"><span class="leading-tight">مهم</span></li>
</ul>

<ul class="list-2">
	<li class="flex mt-2"><img class="mr-2.5" src="https://api2.kokoc.tech/uploads/Icon_Shapes_28_cecee72a37.svg" alt="svg" loading="lazy"><span class="leading-tight">جيد
</span></li>
	<li class="flex mt-2"><img class="mr-2.5" src="https://api2.kokoc.tech/uploads/Icon_Shapes_28_cecee72a37.svg" alt="svg" loading="lazy"><span class="leading-tight">جيد</span></li>
  	<li class="flex mt-2"><img class="mr-2.5" src="https://api2.kokoc.tech/uploads/Icon_Shapes_28_cecee72a37.svg" alt="svg" loading="lazy"><span class="leading-tight">جيد</span></li>
  	<li class="flex mt-2"><img class="mr-2.5" src="https://api2.kokoc.tech/uploads/Icon_Shapes_28_cecee72a37.svg" alt="svg" loading="lazy"><span class="leading-tight">جيد</span></li>
  	<li class="flex mt-2"><img class="mr-2.5" src="https://api2.kokoc.tech/uploads/Icon_Shapes_28_cecee72a37.svg" alt="svg" loading="lazy"><span class="leading-tight">جيد</span></li>
</ul>


<ul class="list-3">
	<li class="flex mt-3"><img class="mr-3.5" src="https://api2.kokoc.tech/uploads/Icon_Shapes_30_66e8ffca7b.svg" alt="svg" loading="lazy"><span class="leading-tight">رائع </span></li>
<li class="flex mt-3"><img class="mr-3.5" src="https://api2.kokoc.tech/uploads/Icon_Shapes_30_66e8ffca7b.svg" alt="svg" loading="lazy"><span class="leading-tight">رائع </span></li>
  <li class="flex mt-3"><img class="mr-3.5" src="https://api2.kokoc.tech/uploads/Icon_Shapes_30_66e8ffca7b.svg" alt="svg" loading="lazy"><span class="leading-tight">رائع </span></li>
  <li class="flex mt-3"><img class="mr-3.5" src="https://api2.kokoc.tech/uploads/Icon_Shapes_30_66e8ffca7b.svg" alt="svg" loading="lazy"><span class="leading-tight">رائع </span></li>
  <li class="flex mt-3"><img class="mr-3.5" src="https://api2.kokoc.tech/uploads/Icon_Shapes_30_66e8ffca7b.svg" alt="svg" loading="lazy"><span class="leading-tight">رائع </span></li>
</ul>


  <style>
   .list-1 .lbImg::before , .list-2 .lbImg::before , .list-3 .lbImg::before{
      display: none;
  }
  .list-1 , .list-2 , .list-3 {
    margin: 0;
    padding: 2px;
  }
  .flex{}
  .mt-1{}
  .mr-1.5{}
  .leading-tight{
      margin-right: 13px;
  }
</style>