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

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

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

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

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

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

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

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

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

9 Likes
#2 
<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>مهمة التدرب على لغة التنسيقات</title>
    </head>
    <style>
        div{
            display: inline-block;
            width: 200px;
            height: 200px;
            margin: 30px;          
        }

        #Color_Red{
            background-color: red;
        }

        #Color_Green{
            background-color: green;
        }

        #Color_blue{
            background-color: blue;
        }
    </style>
    <body>
        
      <div id="Color_Red"></div>
      <div id="Color_Green"></div>
      <div id="Color_blue"></div>
        
    </body>
</html>
2 Likes
#3

Perfect :ok_hand::sunglasses:

1 Like
#4 
<!DOCTYPE html>
<html>
   <head>
       <meta charset="utf-8">
       <title> Attribute ID </title>
       <style>
          div {
             display: inline-block;
             margin: 20px;
             height: 100px;
             width: 100px;
          }
          #green {
              background-color: green;
          }
          #red {
          background-color: red;
          }
          #yellow {
          background-color: yellow;
          }
       </style>
   </head>
   <body>
       <div id="green"> </div>
       <div id="red"> </div>
       <div id="yellow"> </div>
   </body>
</html>
2 Likes
#5

مية مية :+1::sunglasses:

2 Likes
#6 
<!DOCTYPE html>
<html>

<head>
    <title>ID</title>
    <meta charset="utf-8">
    <style>
        div {
            display: inline-block;
            width: 100px;
            height: 100px;
            margin: 15px;
        }

        #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>
2 Likes
#7

ممتاز :ok_hand:

3 Likes
#8

شكرا لك اخي نحن نتعلم ونستفد من خبرتكم شكرا لكم :heartbeat:

3 Likes
#9

مهمة التدرب على ال ID

<!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: 100px;
       height: 100px;
       margin: 20px;
       display: inline-block;

    }

    #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>
2 Likes
#10

ممتاز حمزة :+1:

2 Likes
#11 
<!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-Color</title>
            <style>
                div{    
                        width: 200px;
                        height: 200px;
                        display: inline-block;
                    }
                #red_color{background-color: red}
                #green_color{background-color: green}
                #blue_color{background-color: blue}
            </style>
        </head>
        <body>
            <div id="red_color"></div>
            <div id="green_color"></div>
            <div id="blue_color"></div>
        </body>
    </html>

color

3 Likes
#12

عمل رائع ! محمود

1 Like
#13

مرحباً :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>مهمة: التدرب على الـ ID</title>
</head>
<body>
    <div id="box-one"></div>
    <div id="box-two"></div>
    <div id="box-three"></div>
</body>
</html>

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

2201
2201.png906×623 14.6 KB

2 Likes
#14

ممتاز مروان :muscle:

2 Likes
#15

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 id="red"></div>
    <div id="green"></div>
    <div id="blue"></div>
</body>
</html>

css code

div {
    width: 100px;
    height: 100px;
    display: inline-block;
    margin: 10px;
}
#red {
    background-color: red;
}
#green {
    background-color: green;
}
#blue {
    background-color: blue;
}
3 Likes
#16

مية مية :+1:

2 Likes
#17

مجلد المشروع
id-1
index.html
id-2
code

<div id="one"></div>
<div id="two"></div>
<div id="three"></div>
<style>
    #one{
        width: 100px;
        height: 100px;
        margin: 15px;
        display: inline-block;
        background-color: red;

    }
    #two{
        width: 100px;
        height: 100px;
        margin: 15px;
        display: inline-block;
        background-color: green;
    }
    #three{
        width: 100px;
        height: 100px;
        margin: 15px;
        display: inline-block;
        background-color: blue;
    }
</style>
1 Like
#18

عمل رائع ي طارق :+1:

1 Like
#19 
<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>Id attribute</title>
        <style>
            div {
                display: inline-block;
                margin: 25px;
                height: 150px;
                width: 150px;
            }

            #red {
                background-color: #f00;
            }

            #green {
                background-color: #0f0;
            }

            #blue {
                background-color: #00f;
            }
        </style>
    </head>
    <body>
        <div id="red"></div>
        <div id="green"></div>
        <div id="blue"></div>
    </body>
</html>
2 Likes
#20

كـود الـ Html

<!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 id="reddiv"></div>
	
	<div id="greendiv"></div>
	
	<div id="bluediv"></div>
	  
	  	
	     
 </body>
</html>

كـود الـ Css

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

#reddiv{
	 
	 background-color:red;
	 
}

#greendiv{
	
	background-color:green;
}

#bluediv{
	
	background-color:blue;
}
1 Like