شرح مثال تدفق العناصر الأخير

السلام عليكم و رحمة الله.

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

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

<!DOCTYPE html>

<html>

<head>

integrity="sha512-xh6O/CkQoPOWDdYTDqeRdPCVd1SpvCA9XXcUnZS2FmJNp1coAFzvtCN9BmamE+4aHK8yyUHUSCcJHgXloTyT2A=="

crossorigin="anonymous" referrerpolicy="no-referrer" />

<style>

* {

padding: 0;

margin: 0;

box-sizing: border-box;

}

h1 {

padding: 20px 10px;

text-align: center;

font-family: Arial, Helvetica, sans-serif;

font-size: 20px;

}

.pages-nav {

padding: 0 10px;

margin: 20px 0;

}

.pages-nav a {

display: inline-block;

width: 110px;

padding: 10px 15px;

text-align: center;

text-decoration: none;

color: white;

background-color: #0d6efd;

border: 1px solid #0d6efd;

border-radius: 5px;

font-family: Arial, Helvetica, sans-serif;

font-size: 15px;

}

.pages-nav a.next {

float: right;

}

.float-fixer {

clear: both;

}

</style>

</head>

<body>

<a class="prev" href="#"><i class="fa-solid fa-angle-left"></i> Previous</a>

</div>

<h1>Next And Previous Buttons</h1>

</body>

</html>

<!DOCTYPE html> <html> <head> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.2.0/css/all.min.css" integrity="sha512-xh6O/CkQoPOWDdYTDqeRdPCVd1SpvCA9XXcUnZS2FmJNp1coAFzvtCN9BmamE+4aHK8yyUHUSCcJHgXloTyT2A==" crossorigin="anonymous" referrerpolicy="no-referrer" /> <style> * { padding: 0; margin: 0; box-sizing: border-box; } h1 { padding: 20px 10px; text-align: center; font-family: Arial, Helvetica, sans-serif; font-size: 20px; } .pages-nav { padding: 0 10px; margin: 20px 0; } .pages-nav a { display: inline-block; width: 110px; padding: 10px 15px; text-align: center; text-decoration: none; color: white; background-color: #0d6efd; border: 1px solid #0d6efd; border-radius: 5px; font-family: Arial, Helvetica, sans-serif; font-size: 15px; } .pages-nav a.next { float: right; } .float-fixer { clear: both; } </style> </head> <body> <div class="pages-nav"> <a class="prev" href="#"><i class="fa-solid fa-angle-left"></i> Previous</a> <a class="next" href="#">Next <i class="fa-solid fa-angle-right"></i></a> <div class="float-fixer"></div> </div> <h1>Next And Previous Buttons</h1> </body> </html>

لطفاً، أريد منكم ما يلي:

وضع تعليقات على كل الكلاسات باستثناء الكلاسين الاخيرين (مع توضيح طريقة كتابة الكلاس قبل الأخير).
وضع تعليق أيضاً يوضح سبب إزالة كل الهوامش عبر طرقة التحديد (*).
و أين تم تعريف الكلاس prev

آسف على الإطالة و الإكثار من طلب التوضيحات و الشروحات و الأسئلة و أرجو تحملي قليلاً و شكراً.

HTML

CSS

Programming

احمد محمد بشير

منذ شهر واحد

تعليقات 2

أضف تعليق

يجب تسجيل الدخول حتى تتمكن من إضافة تعليق أو رد.

شرح مثال تدفق العناصر الأخير

احمد محمد بشير

تعليقات 2

أضف تعليق

هدف الموقع

روابط مهمة

حقوق النشر

الدورات

أدوات مساعدة

أقسام الموقع

إبحث