الدرس العاشر: المزيد من القوائم المتقدمة في HTML

في هذا الدرس، سنتعلم المزيد من التفاصيل حول تخصيص القوائم في HTML واستخدام بعض التقنيات المتقدمة مثل القوائم المتداخلة، الصور المخصصة، والتأثيرات التفاعلية.

1. تخصيص القوائم المتداخلة

إليك مثالًا على كيفية إضافة تأثيرات التوسيع والانكماش للقوائم المتداخلة باستخدام CSS:

<ul style="list-style-type: none;">

    <li>العنصر الأول

        <ul style="display: none;">

            <li>العنصر 1.1</li>

            <li>العنصر 1.2</li>

        </ul>

    </li>

    <li>العنصر الثاني</li>

</ul>

<style>

    ul > li:hover > ul {

        display: block;

    }

</style>

2. القوائم غير المرتبة مع صور مخصصة

<ul style="list-style-type: none;">

    <li style="background-image: url('https://example.com/icon.png'); background-repeat: no-repeat; padding-left: 30px;">العنصر الأول</li>

    <li style="background-image: url('https://example.com/icon.png'); background-repeat: no-repeat; padding-left: 30px;">العنصر الثاني</li>

</ul>

3. القوائم المرتبة (Ordered Lists) مع ترقيم مخصص

<ol start="5">

    <li>العنصر الخامس</li>

    <li>العنصر السادس</li>

</ol>

4. قوائم مرتبة متعددة الأعمدة

<ol style="column-count: 2;">

    <li>العنصر الأول</li>

    <li>العنصر الثاني</li>

    <li>العنصر الثالث</li>

    <li>العنصر الرابع</li>

</ol>

5. إضافة تأثيرات القوائم باستخدام CSS

<ul style="list-style-type: square; transition: all 0.3s ease;">

    <li>العنصر الأول</li>

    <li>العنصر الثاني</li>

    <li>العنصر الثالث</li>

</ul>

<style>

    ul li:hover {

        color: red;

        background-color: yellow;

    }

</style>

الخلاصة: الآن لديك معلومات أكثر حول تخصيص القوائم باستخدام CSS، إضافة تأثيرات تفاعلية، وتنظيم المحتوى باستخدام الأعمدة.