تسليم حلول: مهمة التدرب على الكلاسات المتعددة

مرحباً جميعاً

المهمة المطلوبة:

بإمكانك الإطلاع عليها من هنا

طريقة مشاركة الأكواد التي قمت بكتابتها:

قم بنسخ الأكواد من بيئة العمل ومن ثم لصقها بين هذه العلامات

```
هنا ضع الأكواد
```

شاهد الفيديو التالي لتعرف طريقة مشاركة الأكواد للمنتدى بشكل منسق

4 Likes

اول رد :smile:

    <!DOCTYPE html>
<html>

<head>
    <title>ID</title>
    <meta charset="utf-8">
    <style>
        div {
            background-color: #cd1c54;
            width: 40px;
            height: 40px;
            margin: 15px 0 -10px 15px;
        }

        .small {
            width: 100px;
        }

        .medium {
            width: 150px;
        }

        .large {
            width: 250px;
        }

    </style>
</head>

<body>
    <div class="small"></div>
    <div class="large"></div>
    <div class="medium"></div>
    <div class="small"></div>
    <div class="large"></div>
    <div class="medium"></div>
</body>

</html>
1 Like

اول رد :smile:

:joy::ok_hand:

شغلك صحيح 100% ولكن فوت شئ من متطلبات المهمة، أعد قرأتها وركز على أنها تدرب على عمل كلاسات متعددة للعنصر.

ما يعني بأنه لن تستهدف العناصر بالقاعدة

div{}

:wink:

1 Like

صحيح ما انتبهت زين هههههه
تم التصحيح

    <!DOCTYPE html>
<html>

<head>
    <title>ID</title>
    <meta charset="utf-8">
    <style>
        .box {
            background-color: #cd1c54;
            width: 40px;
            height: 40px;
            margin: 15px 0 -10px 15px;
        }

        .small {
            width: 100px;
        }

        .medium {
            width: 150px;
        }

        .large {
            width: 250px;
        }
    </style>
</head>

<body>
    <div class="box small"></div>
    <div class="box large"></div>
    <div class="box medium"></div>
    <div class="box small"></div>
    <div class="box large"></div>
    <div class="box medium"></div>
</body></html>
1 Like

الأن مية مية :ok_hand:

1 Like
<!DOCTYPE html>
<html>
   <head>
      <meta charset="utf-8">
      <title> كلاسات متعددة للعنصر الواحد </title>
      <style type="text/css">
            .box {
                background-color: #cd1c54;
                width: 100px;
                margin: 5px 0 5px 0;
                height: 30px;
            }
            .box1 {
                width: 90px;
            }
            .box2 {
                width: 200px;
            }
            .box3 {
                width: 130px;
      </style>
   </head>
   <body>
       <div class="box small"></div>
       <div class="box large"></div>
       <div class="box medium"></div>
       <div class="box small"></div>
       <div class="box large"></div>
       <div class="box medium"></div>
   </body>
</html>
1 Like

رائع @Siuf

ما رأيك بتسمية كلاسات الاحجام المختلفة بأسماء تعكس دورها بشكل واضح، مثلاً بدلاً من box1 قم بتسميته s أو small وهكذا للكلاسين الأخرين.

في هذه الحالة عندما اقرأ الكود الخاص بك أعرف ما دور كل كلاس من اول نظرة، مثلاً عندما أرى

<div class="box small"></div>

يتبادر لذهني بأن هذا هو عبارة عن صندوق box بحجم small

في الجانب الأخر عندنا هذا الكود:

<div class="box box1"></div>

عندما أشوفة راح اعرف انه في box لكن كلمة box1 ما بتوحي لي ايش دورها إلا اذا صعدت لأكواد الـ CSS وشوف أيش التنسيقات المسندة له.

نفس هذه الملاحظة لك محمد @mohamed1 بخصوص تسميتك للكلاس الأول بـ def بدلاً من أسم له معنى كـ box.

بالمناسبة جاري رفع الدرس الأخير في هذه الوحدة وراح يتكلم عن تسمية الكلاسات ولماذا علينا الإهتمام بذلك :blush:

1 Like

تمام رح اعدل علية واسمي box اني سميتة def اختصار لكلمة default على اساس انو الاعدادات الافتراضية
بس مثل ماكلت تسمية box رح تكون افضل واسهل

1 Like

سوف اهتم بهذا الموضوع انشاء الله سوف اقوم بتصحيحها الان، شكرا لك على ملاحظتك دائما ما تكون لها قيمة .

1 Like
<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>مهمة التدرب على لغة التنسيقات</title>
    </head>
    <style>
        .box {
            background-color: red;           
            height: 50px;
            margin: 15px;
        }
        .s {
            width: 100px;
        }
        .l {
            width: 250px;
        }
        .m {
            width: 150px;
        }
    </style>
    <body>
        
      <div class="box s"></div>
      <div class="box l" ></div>
      <div class="box m"></div>
      <div class="box s"></div>
      <div class="box l"></div>
      <div class="box m"></div>
        
    </body>
</html>
1 Like

ممتاز :+1:

<!DOCTYPE html
    <html lang="en">
        <head>
            <meta charset="UTF-8">
            <meta name="viewport" content="width=device-width, initial-scale=1.0">
            <meta http-equiv="X-UA-Compatible" content="ie=edge">
            <title>التدريب على الكلاسات المتعدده</title>
            <style>
            .box{background-color: red;height: 25px;margin: 15px}
            .l{width: 250px}
            .m{width:150px}
            .s{width:100px}
            </style>
        </head>
        <body>
            <div class="box m"></div>
            <div class="box l"></div>
            <div class="box s"></div>
            <div class="box m"></div>
            <div class="box l"></div>
            <div class="box s"></div>
        </body>
    </html>

classes

1 Like

مية مية :wink::ok_hand:

مهمة التدرب على الكلاسات المتعددة

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
    .box{
        height: 40px;
        background-color: blueviolet;
        margin: 5px;
    }

    .s{
        width: 100px;

    }

    .m{
        width: 150px;

    }

    .l{
        width: 250px;
        

    }
    
    </style>
</head>
<body>

    <div class="box s"></div>
    <div class="box l"></div>
    <div class="box m"></div>
    <div class="box s"></div>
    <div class="box l"></div>
    <div class="box m"></div>

</body>
</html>
1 Like

ممتاز حمزة :ok_hand:

1 Like

مرحباً :hatched_chick::baby_chick::baby_chick:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <link rel="stylesheet" href="css/style.css">
    <title>مهمة: التدرب على الكلاسات المتعددة</title>
</head>
<body>
    <div class="box s"></div>
    <div class="box l"></div>
    <div class="box m"></div>
    <div class="box s"></div>
    <div class="box l"></div>
    <div class="box m"></div>
</body>
</html>

.box{
    background-color:#CD1C54;
    height: 40px;
    margin: 5px;
}
.s{
    width: 100px;
}
.m{
    width: 150px;
}
.l{
    width: 250px;
}

1 Like

طريقة كتابتك لحلول المهمة في التعليق بحد ذاتها ابداع :joy::+1:.

رائع ي مروان إستمر

1 Like

:joy::joy::+1:
مستمرين بإذن الله :baby_chick::baby_chick:
شكرا أستاذ محمد وكل عام وأنت بخير

1 Like

html code

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>home</title>
    <link rel="stylesheet" href="css/style.css">
</head>
<body>
    <div class="box s"></div>
    <div class="box l"></div>
    <div class="box m"></div>
    <div class="box s"></div>
    <div class="box l"></div>
    <div class="box m"></div>
</body>
</html>

css code

.box {
    background-color: #CD1C54;
    width: 400px;
    height: 50px;
    margin: 10px;
}
.s {
    width: 150px;
}
.m {
    width: 220px;
}
.l {
    width: 400px;
}
1 Like

شغل ولا اروع :muscle:

1 Like