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

h444hoo90 · 2 ديسمبر 2019، 9:27م

<!DOCTYPE html>
<html>
    <head>
       <meta charset="UTF-8">
       <meta name="viewport" content="width=device-width, initial-scale=1.0">
       <title>test2</title>
       <style>
       	div {
       		width:100px;
       		height:100px;
       		border: 40px;
       		display:inline-block;
       		padding:20px;
       		margin:20px;
       		box-sizing: border-box;

       	}
       	#leem_le{
       		background-color:red;
       		
       	}
       	#acer_n{
       		background-color:green;
       		
       	}
       	#deep_o{
       		background-color:blue;
       		
       	}
    </style>
    </head>
    <body>
    	<div id="leem_le"></div>
    	<div id="acer_n"></div>
    	<div id="deep_o"></div>
    </body>
    </html>

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

مية مية

antarsidgi · 6 ديسمبر 2019، 2: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>Test ID</title>
    <style>
        div{    
                        width: 200px;
                        height: 200px;
                        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>

antarsidgi · 6 ديسمبر 2019، 2:04م

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

مية مية

Abu-Hamza · 7 ديسمبر 2019، 5: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>
        div{
            display: inline-block;
            width: 75px;
            height: 75px;
            margin: 15px;
        }
        #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>

سؤال: هل هناك أي قواعد في تسمية ال ID؟

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

على حسب اللي تعلمته بفيدك واذا في اضافات الشباب والمطورين اللي هنا ما راح يقصرون معك
القواعد هي :

لازم تبتدي بحرف سواء احرف كبيرة أو صغيرة
تجنب انك تسوي نفس اسم id على واحد ثاني لانه ما زي الكلاس تفرق لازم يكون شئ مميز غير موجود بالصفحة وكان مثلناها بصورة مثل البطاقة الجامعيه يميز الشخص برقم البطاقة الخاص به مثل ال id واذا لم يكن معك يميز ب اسم الكليه او المجال واللتي يمكن تمثيلها بال class
الفاصل بين الكلمة وغيرها علامات شرطية مثل - _ أو يمكنك استخدام : أو نقطة . ولكن كما حدد لنا وقال يفضل استحدام الشرطة هذه - لانها مشهورة دوليا واغلب المطورين يستخدموها

Rayan_Obeid · 9 ديسمبر 2019، 10:42م

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <meta name= viewport content= width=device-width, initial-scale=1> 
        <title>ID Test </title>
        <style>
            div{
                width: 50px;
                height: 50px;
                padding: 10px;
                margin: 5px;
                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>

Alhakem · 10 ديسمبر 2019، 1:01م

Perfect

elmosamem.abdo · 23 ديسمبر 2019، 8:39ص

<!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{
            display: inline-block;
            width: 250px;
            height: 300px;
            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>

Alhakem · 23 ديسمبر 2019، 2:42م

ممتاز

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

Alhakem · 4 يناير 2020، 11:42ص

ممتاز، أرجوا وضع الأكواد مباشرة بدون وضع صور للمحرر

هنا مرجع لكيفية القيام بذلك:

مرجع استعمال المحرر في مجتمع كورتابز عام

يوفر المحرر في مجتمع كورتابز خواص رائعة جداً لجعل تنسيق الردود والمواضيع سهلة وممتعة للقارئ print('كود رائع') ربما أنت الآن تتساءل حول ما أنا كتبته بالأعلى: كيف أضفت تعبير emoji " " بالأعلى؟ أو كيف قمت بجعل النص “لجعل تنسيق الردود والمواضيع سهلة وممتعة” عريض؟ أو كيف كتبت الأكواد بشكل منسق؟ إليك هذا المرجع السريع للقيام بكل هذا: 1. إضافة كود: يمكنكم ذلك باضافة حرف (ذال + shift) ثلاث مرات ``` قبل و بعد الكود، مثال: ``` console.log('hi') console.log('hello') …

Mohamed_Ibrahim98 · 9 يناير 2020، 9:50ص

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

</html>

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

#red {
	background-color: red;
}

#green {
	background-color: green;
}

#blue {
	background-color: blue;
}

AnasAlshorbasi · 14 يناير 2020، 12:25ص

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

    </body>
</html>

Alhakem · 14 يناير 2020، 7:19ص

ممتاز أنس

abuali · 29 فبراير 2020، 2:00م

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>Attribute ID</title>
    </head>
    <style>
        div{
          display: inline-block;
          width: 150px;
          height: 150px;  
        }
        #red{
            background-color: red;
        }
        #green{
            background-color: green;
        }
        #blue{
            background-color: blue;
        }
    </style>
    <body>
        <div id="red"></div>
        <div id="green"></div>
        <div id="blue"></div>
    </body>
</html>

a.djenane · 2 مارس 2020، 1:58م

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        div{
            margin: 20px;
            display: inline-block;
            width: 100px;
            height: 100px;
        }
        #red-box{
            background-color: red;
        }

        #green-box{
            background-color: green;
        }

        #blue-box{
            background-color: blue;
        }
    </style>
</head>
<body>
    <div id="red-box"></div>
    <div id="green-box"></div>
    <div id="blue-box"></div>
</body>
</html>

amtma20 · 4 مارس 2020، 11:55م

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

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

        #Red_Color{
            background-color: red;
        }

        #Green_Color{
            background-color: green;
        }

        #Blue_Color{
            background-color: blue;
        }
    </style>
    <body>
        
      <div id="Red_Color"></div>
      <div id="Green_Color"></div>
      <div id="Blue_Color"></div>
        
    </body>
</html>

Bashir · 7 مارس 2020، 9:25ص

‏لقطة الشاشة ١٤٤١-٠٧-١٢ في ١١.٢٣.٢٠ ص1440×900 92.9 KB