تسليم حلول: مهمة التدرب على القوائم - Lists

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

ممكن تلميح

1 Like
#22 
<li>الالكترونيات</li>
            <ul>
                    <li>كاميرات</li>
                    <li>اجهزة كمبيوتر</li>
                    <li>اجهزة منزلية</li>
            </ul>

القائمة ul هي قائمة فرعية للإلكترونيات لهذا يجب أن تكون بداخل عنصر الإلكترونيات، قم بمراجعة هذا الدرس
https://coretabs.net/classroom/frontend/القوائم-في-صفحات-الويب/القوائم-lists/القوائم-الفرعية

وشوف المكان المناسب للقائمة الفرعية الخاصة بأي عنصر

1 Like
#23 
<!DOCTYPE html>
<html lang="ar">
    <head>
        <meta charset="utf-8">
        <title>القوائم</title>
        <style>
            body {
                direction: rtl;
            }
        </style>
    </head>
    <body>
        <ul>
            <li>الرئيسية</li>
            <li>الالكترونيات
                <ul>
                    <li>كاميرات</li>
                    <li>أجهزة كمبيوتر</li>
                    <li>أجهزة منزلية</li>
                </ul>
            </li>
            <li>المنزل
                <ul>
                    <li>الأثاث والديكور</li>
                    <li>المطبخ</li>
                </ul>
            </li>
            <li>الأزياء
                <ul>
                    <li>حقائب اليد</li>
                    <li>الساعات</li>
                </ul>
            </li>
        </ul>
    </body>
</html>
1 Like
#24

مرحبا طارق، هل قمت بإعادة النظر على حل هذه المهمة ؟

1 Like
#25

ممتاز @Radwa عمل رائع

1 Like
#26 
<!DOCTYPE html>
<html>
 <head>
 
   <meta charset="utf-8">
   
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   
   <title>القوائم</title>   
   
   <style>
   
     body{
     	
     	 direction:rtl;
     }
     
   </style>
 
 </head>
 
 <body>
 
    <ul>
      
       <li>الرئيسية</li>
       
       <li>الإلكترونيات 
       
          <ul>
         
          <li>كاميرات</li>
          <li>أجهزة كمبيوتر</li>
          <li>أجهزة منزليه</li>
          
         </ul>
       
       </li>
       
         
         
       <li>المنزل 
       
          <ul>
         
          <li>الأثاث والديكور</li>
          <li>المطبخ</li>
          
          
         </ul>
         
       </li>
         
       <li>الأزياء  
       
         <ul>
         
          <li>حقائب اليد</li>
          <li>الساعات</li>
          
          
         </ul>
         
       </li>
    
    
    </ul>
 

	  	
	     
 </body>
</html>
1 Like
#27

Perfect Faten :+1:

1 Like
#28 
<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>practice list </title>
        <style>
            body{
                direction: rtl;
            }
            ul{
                font-size: 20px;
            }
        
        </style>
       
    </head>
    <body>
        <ul>
            <li>الرئيسية</li>
            <li>الإلكترونيات
                <ul>
                    <li>كاميرات</li>
                    <li>أجهزة كمبيوتر</li>
                    <li>أجهزة منزل</li>
                
                </ul>
            </li>
            <li>المنزل
                <ul>
                    <li>الأثاث والديكور</li>
                    <li>المطبخ</li>
                
                </ul>
            </li>
            <li>الأزياء
                <ul>
                    <li>حقائب اليد</li>
                    <li>الساعات</li>
                
                </ul>
            </li>
        </ul>
    </body>
</html>
2 Likes
#29

أحسنتي @noora :+1:

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

    <title>التدرب على القوائم</title>


    <style>
    body{
      direction: rtl;
        }
    

    </style>
<body>
  <ul>
    <li>الرئيسية</li>
    <li>الالكترونيات</li>
        <ul>
          <li>كامرات</li>
          <li>أجهزة كمبيوتر</li>
          <li>أجهزة منزلية</li>
        </ul>
    <li>المنزل</li>
    <ul>
      <li>الأثاث و الديكور</li>
      <li>المطبخ</li>
    </ul>
    <li>الأزياء</li>
      <ul>
        <li>حقائب اليد</li>
        <li>الساعات</li>
      </ul>

  </ul>
</body>
</html>
1 Like
#31

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

اذا راجعتية وما عرفتي ايش المشكلة الي عندك قولي لي اجيب لك تلميح

1 Like
#32

ممكن تأشرلي على مكان الخطأ؟؟

1 Like
#33

على سبيل المثال:

<li>الالكترونيات</li>
        <ul>
          <li>كامرات</li>
          <li>أجهزة كمبيوتر</li>
          <li>أجهزة منزلية</li>
        </ul>

القائمة الفرعية التي تحتوي على (كاميرات، أجهزة كمبيوتر، أجهزة منزلية) ليست بدأخل العنصر الأب الذي يفترض بأن تكون هذه القائمة الفرعية مندرجة تحته.

1 Like
#34 
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">

    <title>التدرب على القوائم</title>


    <style>
    body{
      direction: rtl;
        }


    </style>
<body>
  <ul>
    <li>الرئيسية</li>
    <li>الالكترونيات
        <ul>
          <li>كامرات</li>
          <li>أجهزة كمبيوتر</li>
          <li>أجهزة منزلية</li>
        </ul>
    </li>
    <li>المنزل
    <ul>
      <li>الأثاث و الديكور</li>
      <li>المطبخ</li>
    </ul>
  </li>
    <li>الأزياء
      <ul>
        <li>حقائب اليد</li>
        <li>الساعات</li>
      </ul>
    </li>  

  </ul>
</body>
</html>
1 Like
#35

الأن مية مية :+1:

1 Like
#36 
<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>pro|div</title>
        <style>
            body {
                direction: rtl;
            }
        </style>
    </head>
    <body>
      <ul>
          <li>الرئيسية</li>
          <li>الالكترونيات
              <ul>
                  <li>كاميرات</li>
                  <li>أجهزة كمبيوتر</li>
                  <li>أجهزة منزلية</li>
              </ul>
          </li>
          <li>المنزل
              <ul>
                  <li>الاثاث والديكور</li>
                  <li>المطبخ</li>
              </ul>
          </li>
          <li>الازياء
              <ul>
                  <li>حقائب اليد</li>
                  <li>الساعات</li>
              </ul>
          </li>
      </ul>
    </body>
</html>

Capture
Capture.PNG1920×1080 128 KB

1 Like
#37

كما يجب أن يكون :star_struck:

#38 
<!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>تنسبقات الفوائم</title>
    <style>
        body{
            font-size: 30px;
            direction :rtl;
        }
    </style>
</head>
<body>
    <ul>
        <li> الرئيسية</li>
        <li> الالكترونيات</li>
          <ul>
              <li>  كاميرات</li>
              <li>اجهزة كمبيوتر</li>
          </ul>
        <li> المنزل</li>
          <ul>
              <li> الاثاث و الديكور</li>
              <li> المطبخ</li>
          </ul>
        <li> الازياء</li>
          <ul>
              <li> حقائب اليد</li>
              <li>  الساعات</li>
          </ul>
                  
    </ul>
    
</body>
</html>

image
image.png1366×728 40.4 KB

سؤال : كيف فيني اعمل المتصفح بجنب المجرر مثل ما نشوفك نحن ؟

2 Likes
#39

فمتي بـ 50% من العمل بشكل صحيح، أريد منك إعادة مشاهدة الدرس والتأكد من طريقة تضمينك للقوائم الفرعية في المكان الصحيح.

ومن ثم قومي بإعادة المحاولة وقارني جوابك هذا مع حلك الجديد وفي حال ما إن كان حلك مطابق لهذا ولم تستطيعي إيجاد المشكلة قولي لي أجيب لك تلميح.

سؤال : كيف فيني اعمل المتصفح بجنب المجرر مثل ما نشوفك نحن ؟

بالضغط على زر وندوز من لوحة المفاتيح + السهم اليمين على سبيل المثال

زري windows+right

image
image

قومي بتجربة ذلك

2 Likes
#40 
<!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>تنسبقات الفوائم</title>
    <style>
        body{
            font-size: 30px;
            direction :rtl;
        }
    </style>
</head>
<body>
    <ul>
        
        <li> الرئيسية</li>
        <li> الالكترونيات
          <ul>
              <li>  كاميرات</li>
              <li>اجهزة كمبيوتر</li>      
          </ul>
        </li>
        <li> المنزل
          <ul>
              <li> الاثاث و الديكور</li>
              <li> المطبخ</li>
          </ul>
        </li>
        <li> الازياء
          <ul>
              <li> حقائب اليد</li>
              <li>  الساعات</li>
          </ul>
        </li>
                  
    </ul>
    
</body>
</html>

نعم الخلل في

</li>

ولكن ظهرت لي نفس النتيجة عندما قمت بها في الاول

1 Like