الخطوة 2: أضف عنوانًا

بعد ذلك ، أدخل عنوانًا باستخدام أي '

' ل '

'. على سبيل المثال، '

'يضيف عنوانًا.

الخطوة 3: أضف البيانات إلى القائمة

لإدراج البيانات في شكل قائمة ، استخدم ' <هذا> ' بطاقة شعار:

---

---

< شعبة صف دراسي = 'الحيوانات الاليفة' >

< h1 > قائمة الحيوانات الأليفة < / h1 >

< الذي - التي > دجاجة < / الذي - التي >

< الذي - التي > بطة < / الذي - التي >

< الذي - التي > كلب < / الذي - التي >

< الذي - التي > قط < / الذي - التي >

< الذي - التي > أرنب < / الذي - التي >

< / شعبة >

خرج الكود المذكور أعلاه كالتالي:

الآن ، انتقل إلى قسم CSS لتصميم القائمة.

الخطوة 4: عنصر النمط '.pet-animal'

الوصول إلى '

'بمساعدة الفئة المعينة' .الحيوانات الاليفة 'وتطبيق الخصائص المدرجة:

.الحيوانات الاليفة {

الحدود : 2 بكسل منقط RGB ( 230 و خمسة عشر و خمسة عشر ) ؛

حافة : 50 بكسل ؛

لون الخلفية : RGB ( 252 و 239 و 169 ) ؛

}

هنا:

• ' الحدود 'لتحديد الحدود حول العنصر.
• ' حافة 'يحدد المسافة حول حد العنصر.
• ' لون الخلفية 'يخصص لونًا في الجزء الخلفي من العنصر.

تظهر الصورة الناتجة ناتج الكود أعلاه:

الخطوة 5: قائمة الأنماط المضافة 'li'

الآن ، قم بالوصول إلى قائمة ' شعبة 'حاوية بها فئة' الحيوانات الاليفة ' استخدام ' .pet-animal> li 'وتطبيق الخصائص المذكورة أدناه:

.الحيوانات الاليفة > الذي - التي {

الرؤية : مختفي ؛

العتامة : 0.2 ؛

انتقال : الرؤية 0 ثانية و العتامة 0.5 ثانية خطي ؛

}

هنا:

• ال ' الرؤية يتم استخدام CSS لتعيين رؤية العنصر دون تغيير تخطيط المستند ، مثل مخفي أو مرئي.
• ' العتامة 'شفافية العنصر.
• ' انتقال 'يسمح للمستخدمين بتغيير قيم الخاصية بسلاسة خلال مدة معينة:

الخطوة 6: تطبيق فئة Pseudo 'hover'

الآن ، قم بتطبيق ' يحوم 'في القائمة:

.الحيوانات الاليفة : يحوم > الذي - التي {

الرؤية : مرئي ؛

العتامة : واحد ؛

}

ال ' :يحوم 'CSS هي فئة زائفة تقوم بإجراء تغييرات في وقت التشغيل عندما يتم تحريك مؤشر الماوس فوق العنصر. اجعل قائمة مرئية باستخدام ' الرؤية 'وقم بتعيين الشفافية باستخدام' العتامة 'خصائص CSS إلى القائمة عند التمرير:

يمكن ملاحظة أننا نجحنا في تطبيق النقل على ' عرض ' خاصية.

استنتاج

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