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

ورشات الواجهات الأمامية Frontend القوائم في صفحات الويب
#43

مية مية :ok_hand:

1 Like
#44 
<!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>
            body{
            }
            .box{
                background-color: indianred;
                margin: 5px;
                width: 50px;
                height: 40px;
                
            }
            /*Large Class*/
            .l{
                width: 250px;
            }
            /*Medium Class*/
            .m{
                width: 150px;
            }
            /*Small Class*/
            .s{
                width: 100px;
            }
        </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
#45

ممتاز :+1:

#46 
<!DOCTYPE html>
<html>

<head>
    <title>NAJM</title>
    <meta charset="utf-8">
    
</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>
<style> 
    body{
    margin: 0;
    }

        .box {
            background-color: #CD1C54;
            width: 60px;
            height: 50px;
            margin: 20px 0 -10px 20px;
        }

        .small {
            width: 100px;
        }

        .medium {
            width: 150px;
        }

        .large {
            width: 250px;
        }
    </style>
</html>
1 Like
#47

ممتاز ي نجم، فقط قم بنقل أكواد التنسيقات إلى منطقة الـ head

#48 
<!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>boxes1</title>
    <style>
        .box{
            height: 40px;
            background-color: palevioletred;
            margin: 7px;
        }
        .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>

2019-07-02%2021_34_49-boxes1
2019-07-02 21_34_49-boxes1.png1366×728 16.9 KB

1 Like
#49

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

اكواد html

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title> مهمة التدرب على كلاسات متعددة </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

.box{
    background-color: purple;
    padding: 10px;
    margin: 10px;
}
.s{
    width: 100px;
}
.l{
    width: 250px;
}
.m{
    width: 150px;
}
1 Like
#50 
<!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{
        background: red ;
        border:1px solid red;
        margin :10px ;
        height: 30px;

    }
    .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
#51 
<!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>
    .HMB {
        
         height: 30px;
         margin: 5px;
         background-color:#CD1C54;

         
     }   
    .s{
       
        width: 100px;
    }
    .m{
        width: 150px;
    }
    .l{
        width: 250px;
    }
    </style>
</head>
<body>
        <div class="HMB m"></div>
        <div class="HMB s"></div>
        <div class="HMB m"></div>
        <div class="HMB s"></div>
        <div class="HMB l"></div>
        <div class="HMB s"></div>
        <div class="HMB m"></div>
        <div class="HMB s"></div>
        <div class="HMB l"></div>
        <div class="HMB m"></div>
        <div class="HMB l"></div>
        <div class="HMB s"></div>
</body>
</html>
#52

أحسنتم الكود بيرفكت :+1:

#53 
<!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:50px;
               background-color: chartreuse;
               margin:10px;
           }
           .s{
               width:100px;
           }
           .m{
               width:150px;
           }
           .l{
               width:250px;
           }
    </style>
</head>
<body>
    <div class="box l"></div>
    <div class="box m"></div>
    <div class="box l"></div>
    <div class="box s"></div>
    <div class="box l"></div>
    
</body>
</html>
1 Like
#54 
<!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{
            background-color: #cd1c54;
            height: 40px;
            margin: 10px;
        }
        .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
#55

ممتاز :star_struck:

@simoprine
@ArijTrabelsi

1 Like
#56 
<!DOCTYPE html>
<html lang="en">
   <head>
     <meta charset="utf-8">
     <title>مهمة التدرب على الكلاسات المتعددة</title>
   </head>
   <style>
      .box{
        background-color: lightblue;
        height: 30px;
        margin:5px 0 5px 5px;
      }
      .small{
        width: 100px;
      }
      .medium{
        width: 150px;
      }
      .large{
        width: 250px;
      }


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

ممتاز :ok_hand:

#58

Screenshot_2019-09-16%20Css

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Css</title>
    <style>
        .box{
            height:45px;
            background-color:brown;
            margin:4px 0 10px;
        }
        .s{
            width:100px;
        }
        .m{
            width:150px;
        }
        .l{
            width:250px;
        }
    </style>

</head>
<body>
    <div class="s box"></div>
    <div class="l box"></div>
    <div class="m box"></div>
    <div class="s box"></div>
    <div class="l box"></div>
    <div class="m box"></div>
</body>
</html>
1 Like
#59

HTML

<!DOCTYPE html>
<html>
    <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>projectx</title>
        <link rel="stylesheet" href="css/style.css">
    </head>
    <body>
        <div class="BOXs"> </div>
        <div class="BOXl"> </div>
        <div class="BOXm"> </div>
        <div class="BOXl"> </div>
        <div class="BOXs"> </div>
        <div class="BOXm"> </div>
    </body>
</html>

CSS

body{
    direction: rtl;
}
div{
    margin: 10px;
}
.BOXs{
    background-color: brown;
    width: 100px;
    height: 20px;
}
.BOXm{
    background-color: gold;
    width: 150px;
    height: 20px;
}
.BOXl{
    background-color: slategrey;
    width: 200px;
    height: 20px;
}

3

1 Like
#60

ممتاز ي نائف :100:

#61

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

مثلاً

الإرتقاع 20px قمت بتكرارة لكل الصناديق قم بمسحة من الكلاسات و وضعة في القاعدة العامة التي تستهدف جميع العناصر :grin:

1 Like
#62

HTML

<!DOCTYPE html>
<html>
    <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>projectx</title>
        <link rel="stylesheet" href="css/style.css">
    </head>
    <body>
        <div class="BOXs"> </div>
        <div class="BOXl"> </div>
        <div class="BOXm"> </div>
        <div class="BOXl"> </div>
        <div class="BOXs"> </div>
        <div class="BOXm"> </div>
    </body>
</html>

CSS

body{
    direction: rtl;
}
div{
    margin: 10px;
    height: 20px;
}
.BOXs{
    background-color: brown;
    width: 100px;
}
.BOXm{
    background-color: gold;
    width: 150px;
}
.BOXl{
    background-color: slategrey;
    width: 200px;
}

%D8%A8%D8%AF%D9%88%D9%86%20%D8%B9%D9%86%D9%88%D8%A7%D9%86