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

Faten · 31 مايو 2019، 2:55ص

<!DOCTYPE html>
<html>
 <head>
 
   <meta charset="utf-8">
   
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   
   <title></title>   
   
   <link rel="stylesheet" href="style2.css">
  
 </head>
 
 <body>
 
	<div class="red"></div>
	
	<div id="greendiv"></div>
	
	<div class="red"></div>
	  
	  	
	     
 </body>
</html>

div{
	width:100px;
	height:100px; 
	display:inline-block;
	margin:15px;
}

.red{
	 
	 background-color:red;
	 
}

#greendiv{
	
	background-color:green;
}

Noora · 31 مايو 2019، 11:40ص

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>practice class</title>
        <style>
            div{
                height:100px;
                width: 100px;
                display: inline-block;
                margin: 20px;
            }
            .red{
                background-color: red;
            }
            .green{
                background-color: green;
            }
            
        </style>
    </head>
    <body>
        <div class="red"></div>
        <div class="green"></div>
        <div class="red"></div>
    </body>
</html>

Alhakem · 31 مايو 2019، 12:38م

@FatenAli
@Noora

جميل

ouidad · 7 يونيو 2019، 10:22م

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">

    <title>2222</title>


    <style>
    div{
      display: inline-block;

      width: 250px;
      height: 250px;
      margin:50px;
    }
    .one {
      background-color: red;
    }
    .twoo {
      background-color: Green;
    }

    </style>
<body>
<div class="one"></div>
<div class="twoo"></div>
<div class="one"></div>
</body>
</html>

Alhakem · 8 يونيو 2019، 12:54م

ممتاز

abdallahmiri · 9 يونيو 2019، 9:36م

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>pro|div</title>
        <style>
            div {
                margin: 20px;
                width: 200px;
                height: 200px;
                display: inline-block;
                border: 1px solid #fff;
            }
            .pro_red {
                background-color: red;
            }
            #two {
                background-color: green;
            }
        </style>
    </head>
    <body>
        <div class="pro_red"></div>
        <div id="two"></div>
        <div class="pro_red"></div>
    </body>
</html>

Alhakem · 9 يونيو 2019، 10:56م

مضبوط

nabilateuse · 15 يونيو 2019، 7:04م

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

width: 200px;
height: 200px;
margin: 20px;
display: inline-block;

}

.red{
 background-color:red;
}

.green{

 background-color: green;
}


</style>
</head>
<body>

<div class="red"></div>
<div class="green"></div>
<div class="red"></div>
</body>
</html>

        ![image|690x367](upload://nQPJ4yMc66SZZ6rbWsctrGeudcG.png)

nabilateuse · 15 يونيو 2019، 7:05م

Alhakem · 16 يونيو 2019، 8:43ص

رائع ي نبيلة

mosaab.laboune · 19 يونيو 2019، 10:44م

مهمة التدرب على الClass:

<!DOCTYPE html>
<html>
<head>
    <meta charset='utf-8'>
    <meta http-equiv='X-UA-Compatible' content='IE=edge'>
    <title>مهمة التدرب على الClass:</title>
    <meta name='viewport' content='width=device-width, initial-scale=1'>
    <style>
        div{
            width: 200px;
            height: 200px;
            margin: 50px;
            display: inline-block;
        }
        .red{
            background-color: red;
        }
        .green{
            background-color: green;
        }
    </style>
</head>
<body>
    <div class="red"></div>
    <div class="green"></div>
    <div class="red"></div>
</body>
</html>

التطبيق على المهمة:

Alhakem · 20 يونيو 2019، 7:18ص

أحسنت ي مصعب

mgandali · 21 يونيو 2019، 8:32م

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="Content-Type" content="text/html; charset=windows-1256" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title></title>

</head>
<style>
    div{
        height: 100px;
        width: 100px;
        box-sizing: border-box;
        margin:20px;
        display: inline-block;
    }
    .red{
           background-color: red;
    }

    .green{
           background-color: green;
    }

   

</style>
<body>
<header>

</header>
<main>
    <div class="red"></div>
    <div class="green"></div>
    <div class="red"></div>
     
</main>
<footer>

</footer>
    </body>
</html>
........

mofi · 22 يونيو 2019، 12:34م

استخدام class

<!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>Selctor-id</title>
    <style>
        div{
        width: 100px;
        height: 100px;
        margin: 20px;
        display: inline-block;
        }
        #div-red{
        background-color: red;
        }
        .div-green{
            background-color: green;
        }
    </style>
</head>
<body>

    <div id="div-red"></div>
    <div class="div-green"></div>
    <div id="div-red"></div>
    
</body>
</html>

Alhakem · 22 يونيو 2019، 6:52م

ممتاز مازن

Alhakem · 22 يونيو 2019، 6:53م

عمل رائع لكن ركزي قمتي بإستخدام الـ id التالي مرتين وذلك لا يجوز:

id="div-red"

قومي بإستخدام الكلاس بدلاً منه طالما سيتم إسنادة لأكثر من عنصر

FadiRustom · 29 يونيو 2019، 10:49ص

<html lang="en">
     <head>
	<meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>Fadi Rustom</title>
	<style>
           div{
             color:#fff;
             width: 200px;
             height: 200px;
             padding: 10px;
             margin: 5px;
             display: inline-block;
           }
           #green-div{
             background-color: green;
           }
          .red-div{
             background-color: red;
           }
       </style>
    </head>
    <body>
        <div class="red-div"></div>
        <div id="green-div"></div>
        <div class="red-div"></div>
     </body> 
    </html>

NAJM · 28 يونيو 2019، 4:30م

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
    </head>
    <style>
        div{
            display: inline-block;
            width: 150px;
            height: 150px;
            margin: 35px;          
        }

        #Color_Red{
          background-color: red;
        }

        #Color_Green{
          background-color: green;
        }
        body { 
          margin: 0;
        }
    </style>
    <body>

      <div id="Color_Red"></div>
      <div id="Color_Green"></div>
      <div id="Color_Red"></div>
        
    </body>
</html>

Alhakem · 28 يونيو 2019، 4:44م

راجع الكود الخاص بك، قمت بإستخدام ID وليس class

Ebtesam · 2 يوليو 2019، 6:06م

<!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>boxes</title>
    <style>
        body div{
            width: 200px;
            height: 200px;
            margin: 30px;
            display: inline-block;
        }
        .red-box{
            background-color: red;
        }
        #green-box{
            background-color: green;
        }
    </style>
</head>
<body>
    <div class="red-box"></div>
    <div id="green-box"></div>
    <div class="red-box"></div> 
</body>
</html>