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

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

ممتاز :+1:

@Azharo
@Hishamo

1 Like
#42

:relaxed: ,وهذا عملي !!

<!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>
    #first-box{
        border: 10px solid red;
        width :150px;
        height: 100px;
        background: red ;
        margin: 10px ;
        display: inline-block;
    }
    #second-box{
        border: 10px solid green;
        width :150px;
        height: 100px;
        background: green;
        margin :10px ;
        display :inline-block;
    }
    #third-box{
        border: 10px solid blue ;
        width :150px;
        height: 100px;
        background:blue  ;
        margin:10px ;
        display: inline-block;
    }
    </style>
</head>
<body>
    <div id="first-box"></div>
    <div id="second-box"></div>
    <div id="third-box"></div>
</body>
</html>
1 Like
#43 

<!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: 50px;
         height: 50px;
         margin: 20px;
         display: inline-block;
     }   
    #one{
        background-color: aquamarine;
    }
    #tow{
        background-color: blue;
    }
    #three{
        background-color: yellowgreen;
    }
    </style>
</head>
<body>
    <div id="one"></div>
    <div id="tow"></div>
    <div id="three"></div>
    
</body>
</html>
1 Like
#44

رائع

ما رأيك ان تخرج التنسيقات المشتركة في قاعدة عامة والتي هي:

width :150px;
height: 100px;
margin :10px ;
display :inline-block;

بحيث نستهدف كل الـ div الموجود بالصفحة بالشكل التالي:

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

ومن ثم نتخلص من تلك التنسيقات من القواعد الاخرى بالشكل التالي:

    #first-box{
        border: 10px solid red;
        background: red ;
    }
    #second-box{
        border: 10px solid green;
        background: green;
    }
    #third-box{
        border: 10px solid blue ;
        background:blue  ;
    }
#45

مية مية :+1:

#46 
<!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:150px;
             height:150px;
             margin:50px;
             display:inline-block;
            
             
         }
         #one{
             background-color:red; 
         }
         #two{
             background-color:green; 
         }
         #three{
             background-color:blue; 
         }
    </style>
</head>
<body>
    <div id="one"></div>

    <div id="two"></div>

    <div id="three"></div>
    
</body>
</html>
#47 
<!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>ID مهمة التدرب على</title>
    <style>
        div{
            width: 200px;
            height: 200px;
            display: inline-block;
            margin: 30px;
        }
        #First{
            background-color: red;
        }
        #Second{
            background-color: green;
        }
        #Third{
            background-color: blue;
        }
    </style>
</head>
<body>
    <div id="First"></div>
    <div id="Second"></div>
    <div id="Third"></div>
</body>
</html>
1 Like
#48

ممتاز :slight_smile:

1 Like
#50 
<!DOCTYPE html>
<html lang="en">
   <head>
     <meta charset="utf-8">
     <title> مهمة التدرب على الـ ID</title>
   </head>
   <style>

      div{

        display: inline-block;
        height: 300px;
        width: 300px;
        margin: 30px;
      }
      #one{
        background-color: red;

      }
      #two{
        background-color: green;
      }
      #three{
        background-color: blue;
      }
   </style>
   <body>
     <div id="one"></div>
     <div id="two"></div>
     <div id="three"></div>
   </body>
</html>
1 Like
#51

Screenshot_2019-09-15%20Id
Screenshot_2019-09-15 Id.png783×314 367 Bytes 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Id</title>
    <style>
        div{
            width:200px;
            height:200px;
            margin:30px 30px 0 30px;
            display:inline-block;
        }
        #one{
            background-color:red
        }
        #two{
            background-color:green
        }
        #three{
            background-color:blue
        }
    </style>
</head>
<body>
    <div id="one"></div>
    <div id="two"></div>
    <div id="three"></div>   
</body>
</html>
1 Like
#52

مية مية

1 Like
#53

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 id="one"> </div>
        <div id="two"> </div>
        <div id="three"> </div>
    </body>
</html>

CSS

div{
    width: 200px;
    height: 200px;
    display: inline-block;
    margin: 10px;
}
#one{
    background-color: red;
}
#two{
    background-color: blue;
}
#three{
    background-color:green;
}

3
3.jpg701×250 7.96 KB

1 Like
#54

مضبووط :+1:

#55

Untidddtled
Untidddtled.png1359×741 33.5 KB 

<!DOCTYPE html>
 <html>
  <head>
   <title>id</title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
	<style>
	 div{
        display:inline-block;
        width:200px;
        height:200px;
		margin:30px ;
        		
	 }
	 #red{
         background-color:red;
		 
	 }
	 #blue{
         background-color:blue;		 
	 
	 }
	 #green{
	       background-color:green; 
	 }
	</style>
  </head>
   <body>
    <div id="red"></div>
	<div id="blue"></div>
	<div id="green"></div>
   </body>
 </html>
1 Like
#56

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{
            float: left;
            height: 50px;
            width: 50px;
            margin: 10px;
        }
        #red{
            background-color: red;
        }
        #green{
            background-color: green;
        }
        #blue{
            background-color: blue;
        }
    </style>
</head>
<body>
    <div id="red"></div>
    <div id="green"></div>
    <div id="blue"></div>
</body>
</html>

gh

1 Like
#57 
<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title></title>
        <style>
            div{
                height: 150px;
                width: 150px;
                display: inline-block;
                margin: 20px;
            }
            #red{
                background-color: red;
            }
            #green{
                background-color: green;
            }
            #blue{
                background-color: blue;
            }
        
        </style>
    </head>
    <body>
        <div id="red"></div>
        <div id="green"></div>
        <div id="blue"></div>
    </body>
</html>
1 Like
#58

ممتاز ي علي :ok_hand:

#59 
<!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>
    div{width:180px;
        height:200px;
    margin:100px;
    display: inline-block;
    border: 50px dashed black;
}
    #box_red{background:red;}
    #box_blue{background:blue;}
    #box_green{background:green;}
</style>
<body>
    <div id="box_red"></div>
    <div id="box_blue"></div>
    <div id="box_green"></div>
</body>
</html>
````المحافظة على التنسيق`
1 Like
#60

Capture
Capture.PNG1857×777 1.86 KB

1 Like
#61

جميل :+1: :grin:

1 Like