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

ورشات الواجهات الأمامية Frontend القوائم في صفحات الويب
#42 
<!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>
        .paragraph-one{
            background-color:red;
            width: 80px;
            height: 80px;
            display:inline-block;
            margin: 20px;
        }
        #paragraph-two{
            background-color: blue;
            width: 80px;
            height: 80px;
            display: inline-block;
            margin:20px;
        }
        
    </style>
</head>
<body>
    <div class="paragraph-one"></div>
    <div id="paragraph-two"></div>
    <div class="paragraph-one"></div>
</body>
</html>
1 Like
#43

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

اكواد html

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title> Class مهمة التدرب على ال</title>
        <link rel="stylesheet" href="css/style.css">
    </head>
    <body>
        
        <div class="Red"></div>
        <div id="Green"></div>
        <div class="Red"></div>
          
    </body>
</html>

اكواد css

div{
    display: inline-block;
    width: 400px;
    height: 400px;
    margin: 30px;
}
.Red{
    background-color: red;
}
#Green{
    background-color: green;
}
1 Like
#44 
<!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>
    .redbox{
        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;
    }
   
    }
    </style>
</head>
<body>
    <div class="redbox"></div>
    <div id="second-box"></div>
    <div class="redbox"></div>
</body>
</html>
1 Like
#45 
<!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: 80px;
         height: 80px;
         margin: 10px;
         display: inline-block;
     }   
    .one{
        background-color: red;
    }
    .tow{
        background-color: green;
    }
    .three{
        background-color: red;
    }
    </style>
</head>
<body>
    <div class="one"></div>
    <div class="tow"></div>
    <div class="three"></div>
    
</body>
</html>
1 Like
#46

رائع ي شباب كله مضبوط :+1:

#47

بسام لاحظ ان التنسيقات الي في الكلاسين one و two متطابقة، حيث كلاً من الكلاسين بيعطوا لون خلفية احمر لذا لا داعي لان تكرر كلاس اخر بنفس التنسيقات وبإمكانك إستخدام كلاس واحد فهذه هي فكرة الكلاسات مثلاً هكذا:

<div class="one"></div>
<div class="tow"></div>
<div class="one"></div>
1 Like
#48 
<!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;
             display:inline-block;
             margin:50px;
             
         }
         .red{
             background-color:red; 
         }
         .green{
             background-color:green; 
         }
         .red{
             background-color:red; 
         }
    </style>
</head>
<body>
    <div class="red"></div>

    <div class=green></div>

    <div class="red"></div>
    
</body>
</html>
1 Like
#49 
<!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>class</title>
    <style>
        div{
            width: 150px;
            height: 150px;
            display: inline-block;
            margin: 30px;
        }
        .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>
1 Like
#50

عمل رائع سالم :clap:

ملاحظة واحدة:

لا داعي لتكرار الكلاس .redمرتين في الكود التالي:

.red{
     background-color:red; 
}
.green{
     background-color:green; 
}
.red{
     background-color:red; 
}

يكفي تعريفة مرة واحدة فقط وإستخدامة كم ما اردت بالشكل التالي:

.red{
     background-color:red; 
}
.green{
     background-color:green; 
}
#51

Perfect :+1:

1 Like
#52

شكرا على التنبيه

1 Like
#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>
    <style>
         div{
             width:150px;
             height:150px;
             display:inline-block;
             margin:50px;
             
         }
         .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>
1 Like
#54 
<!DOCTYPE html>
<html lang="en" dir="ltr">
   <head>
     <meta charset="utf-8">
     <title> مهمة التدرب على الـ class</title>
   </head>
   <style>

      div{

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

      }
      .two{
        background-color: green;
      }
   </style>
   <body>
     <div class="one"></div>
     <div class="two"></div>
     <div class="one"></div>
   </body>
</html>

سؤال إذا قمنا بوضع background -color; green داخل div ولم نقم بتحديد class=two للصندوق الأخضر هل ستكون طرقة كتابة الكود سليمة.

1 Like
#55

نعم ستكون سليمة :+1:، غالباً تقوم بعمل تنسيق افتراضي ليقوم تنسيق اخر بالطغيان عليه.

لكن في بعض الحالات فصلها يجعل الكود اكثر تنظيماً ومقرؤ فعندما تلاقي div عندة كلاس باسم deleted مثلاً في اكواد ال html تعرف بأن هذا ال div سيتم تطبيق عليه تنسيقات معينه بدون الحاجة لأن تقوم بعمل تحليل لاكواد ال css وهذا هو الانسب في حال كان حجم التطبيق كبير

#56

Screenshot_2019-09-15%20Id(1)
Screenshot_2019-09-15 Id(1).png782×257 327 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-Three{
            background-color:red
        }
        .center{
            background-color:green
        }
    </style>
</head>
<body>
    <div class="One-Three"></div>
    <div class="center"></div>
    <div class="One-Three"></div>   
</body>
</html>
1 Like
#57

ممتاز :star_struck::+1:

1 Like
#58

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

CSS

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

3
3.jpg700×251 8.74 KB

1 Like
#59

مية مية :100:

#60

Untitddled
Untitddled.png1366×768 53.8 KB 

<!DOCTYPE html>
 <html>
  <head>
   <title>class</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;
	 }
	 #green{
         background-color:green;		 
	 }
	</style>
  </head>
   <body>
    <div class="red"></div>
	<div id="green"></div>
	<div class="red"></div>
   </body>
 </html>
2 Likes
#61

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;
        }
    </style>
</head>
<body>
    <div class="red"></div>
    <div class="green"></div>
    <div class="red"></div>
</body>
</html>

Capture

1 Like