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

sun · 4 أكتوبر 2019، 7:51م

<!DOCTYPE html>
 <html>
  <head>
   <title>class</title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
	<style>
	body{
	   background-color:#ddd;
	}
	 .box{
	     margin:10px;
		 height:35px;
         background-color:#CD1C54; 
	 }
	 .s{
	   width:100px;
	 
	 }	
     .l{
      width:200px;	 
	 }	 
	 .m{
	  width:150px;
	 }
	</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>

HDZ · 24 أكتوبر 2019، 10:24م

Hi there!

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

Capture

ali200 · 8 نوفمبر 2019، 7:57ص

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title></title>
        <style>
            .box{
                height: 50px;
                margin: 10px;
                background-color: #CD1C54;
            }
            .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>

Alhakem · 8 نوفمبر 2019، 2:54م

مية مية عمل مضبوط

RafaAlkhamry · 29 نوفمبر 2019، 4: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>
</head>
<style>
   .L{width:250px;background:#CD1C54;
    height:40px;
margin:10px;}
   .M{width:150px;background:#CD1C54;margin:10px;height:40px;}
   .S{width:100px;background:#CD1C54;margin:10px;height:40px;}
</style>
<body>
    <div class="L"></div>
    <div class="M"></div>
    <div class="S"></div>
    <div class="L"></div>
    <div class="M"></div>
    <div class="S"></div>
</body>
</html>

Alhakem · 30 نوفمبر 2019، 2:42م

مية مية كلو ممتاز بس نفس ملاحظتي السابقة والي هي فصل التنسيقات المشتركة و وضعها في كلاس مشترك.

مثلاً عندنا كل القواعد عندها هذه التنسيقات المشتركة:

background:#CD1C54;
height:40px;
margin:10px;

خذيها لكلاس بإسم box على سبيل المثال:

.box{
   background:#CD1C54;
   height:40px;
   margin:10px;
}

وبعدين اسندي هذا الكلاس للعناصر بالشكل التالي:

    <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>
    <div class="box S"></div>

h444hoo90 · 2 ديسمبر 2019، 10:12م

<!DOCTYPE html>
<html>
    <head>
       <meta charset="UTF-8">
       <meta name="viewport" content="width=device-width, initial-scale=1.0">
       <title>boxs</title>
       <style>
          .box{
            background-color:#708090;
            margin:5px;
            padding:15px;
            height:20px;
            
          }
          .s{
            width:100px;
          }
          .l{
            width:250px;
          }
          .m{
            width:150px;
          }
    
    </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>

Alhakem · 3 ديسمبر 2019، 11:31ص

ممتاز

antarsidgi · 6 ديسمبر 2019، 3:15م

Alhakem · 6 ديسمبر 2019، 3:47م

Well done, you are a rising star

antarsidgi · 6 ديسمبر 2019، 7:30م

Thank you

Abu-Hamza · 7 ديسمبر 2019، 6:35م

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

Alhakem · 7 ديسمبر 2019، 6:44م

مية مية

Rayan_Obeid · 9 ديسمبر 2019، 11:05م

<!DOCTYPE html>
<html>
    <head>
            <meta charset="utf-8">
            <meta name= viewport content= width=device-width, initial-scale=1> <!--توافقية الموبايل -->
            <title>Classes </title>
            <style>
                .box{
                    height: 25px;
                    background-color: mediumvioletred;
                    padding: 1px;
                    margin: 3px;

                    }
                .s{
                    width: 100px;
                   
                    }
                .m{
                    width: 150px;
                 }
                .l{
                     width: 200px;
                 }
            </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>

elmosamem.abdo · 23 ديسمبر 2019، 9:13ص

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=div, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        .box{
            background-color: blueviolet;
            width: 150px;
            height: 40px;
            margin: 10px;
        }
        .l{
            width: 250px;
        }
        .m{
            width: 150px ;
        }
        .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>

Benoo · 4 يناير 2020، 11:56ص

Mohamed_Ibrahim98 · 9 يناير 2020، 10:39ص

<!DOCTYPE html>
<html>

  <head>
    <link rel="stylesheet" href="normalize.css" />
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>STORE</title>
    <link rel="stylesheet" href="css/style.css">
  </head>

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

</html>

div {
  height: 30px;
	margin: 20px;
  background-color: red;
}

.s {
	width: 100px;
}

.m {
	width: 150px;
}

.m {
	width: 250px;
}

Alhakem · 9 يناير 2020، 11:51ص

ممتاز ي محمد، الهدف من هذه المهمة هو إسناد اكثر من كلاس واحد للعنصر، لذا بدلاً من إستهداف الـ div بقاعدة عامة إعمل الكلاس box وجيبة للعناصر

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

هكذا

abuali · 1 مارس 2020، 12:25م

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>   classes   </title>
    </head>
    <style>
        .box{
            height: 30px;
            background-color: #CD1C54;
            margin-bottom: 5px;
        }
        .s{
            width:100px;
        }
        .m{
            width:150px;
        }
        .l{
            width:250px;
        }
    </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>

a.djenane · 3 مارس 2020، 11:36ص

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>classes</title>
    <style>
        .box{
            background-color: rgb(233, 5, 43);
            height: 20px;
           
            margin: 15px;
            padding: 15px;
            color :white;
            font-size: 22px; 
        }
        .l{
          width: 250px;  
        }
        .m{
            width: 150px; 
        }
        .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>