❮
Programming Basics SQL HTML CSS JavaScript React Python C++ Java JavaFX Swing Problem Solving English English Conversations Computer Fundamentals Linux Learn Typing
❯
الرئيسية ❯ الأسئلة ❯ شرح مثال تدفق العناصر الأخير

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

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

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

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

<!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

أضف تعليق

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