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

nabilateuse · 21 يونيو 2019، 5: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>تنسبقات الفوائم</title>
    <style>
        body{
            font-size: 30px;
            direction :rtl; 
            
        }
        .check-list {
            list-style-type: none;
            list-style-image: url('images/check-icon.png')
        }
        .delete-list{
            list-style-image: url('images/delete-icon.png')
        }
        
    </style>
</head>
<body>
    <ul class="check-list">
        
        <li> دفع بالتقسيط</li>
        <li> شحن مجاني </li>
        <li>ضمانة3 سنوات</li>
    </ul>
    <ul class="delete-list">
         <li> قابل للارجاع</li>
         <li>قابل للاستبدال</li>
    </ul>
    
</body>
</html>

اعلم ان التنسيقات غير جيدة اريد المساعدة
كيف اجعل كل الصفوف مثل بعض هناك فراغ كبير بين check and delete

Alhakem · 22 يونيو 2019، 7:18م

جميل ي نبيلة قمتي بعمل ممتاز.

اعلم ان التنسيقات غير جيدة اريد المساعدة
كيف اجعل كل الصفوف مثل بعض هناك فراغ كبير بين check and delete

في البدأية يجب أن يكون لديك قائمة ul واحدة وليس أثنتين، ومن ثم ستقومي بإسناد الـ class لكل عنصر li مباشرة بدلاً من وضعة للأب ul

قومي بتجربة ذلك و أخبريني بالنتيجة

mgandali · 23 يونيو 2019، 12:26م

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="Content-Type" content="text/html; charset=windows-1256" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>التدرب على القوائم</title>

</head>
<style>
  body{
      direction: rtl;
  }
  ul li{
      margin:10px;
      padding:10px;
      background-color: #FAFAFA; 
      font-size: 30px;
      font-weight: bold;  
      list-style-position: inside; 

  }
  .check{
      list-style-image:url('images/iconfinder_f-check_256_282474.png');
  }
  .delete{
    list-style-image:url('images/iconfinder_Delete_1493279.png');

  }
  
</style>
<body>
<header>
        
</header>
<main>
      <ul>
<li class="check">دفع بالتقسيط</li>
<li class="check">شحن مجاني</li>
<li class="check">ضمانة 3 سنوات</li>
<li class="check">قابل للإرجاع</li>
<li class="check">قابل للإستبدال</li>

      </ul>
    

</main>
<footer>

</footer>
    </body>
</html>

nabilateuse · 23 يونيو 2019، 12:56م

<body>
   <ul>
        
        <li class="check-list"> دفع بالتقسيط</li>
        <li class="check-list"> شحن مجاني </li>
        <li class="check-list">ضمانة3 سنوات</li>
   
        <li class="delete-list"> قابل للارجاع</li>
        <li class="delete-list">قابل للاستبدال</li>
    </ul>
    
</body>
</html>

Alhakem · 23 يونيو 2019، 2:41م

رائع ي مازن، لكن لاحظ انك نسيت إستخدام الكلاس delete

Alhakem · 23 يونيو 2019، 2:42م

مية مية

FadiRustom · 28 يونيو 2019، 10:24م

<!DOCTYPE html>
<html lang="ar">
    <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 href="https://fonts.googleapis.com/css?family=Lalezar&display=swap" rel="stylesheet">
        <link href="https://fonts.googleapis.com/css?family=Rakkas&display=swap" rel="stylesheet">
        <title> مهمة التدريب على القوائم </title>
        <style>
            body{
                direction: rtl;
                font-family: 'Lalezar', cursive;
            }
            div{
                font-size: 28px;
                list-style-image: url(images/iconfinder_sign-check_299110.png)
            }
            .delete-img{
                list-style-image: url(images/iconfinder_Delete_1493279.svg)
            }

        </style>
    </head>
    <body>
        <div> <!--  قوائم غير مرتبة (Unordered Lists): -->
            <ul>
                <li>دفع بالتقسيط</li>
                <li>شحن بالمجان</li>
                <li>ضمان 3 سنوات</li>
                <li class="delete-img">قابل للإرجاع</li>
                <li class="delete-img">قابل للإستبدال</li>

            </ul>
        </div>

    </body>

</html>

Alhakem · 30 يونيو 2019، 6:06ص

ممتاز ي فادي، فقط في القاعدة التالية:

div{
       font-size: 28px;
       list-style-image: url(images/iconfinder_sign-check_299110.png)
}

قم بإستهداف الـ ul أو الـ li وليس الـ div

NAJM · 1 يوليو 2019، 4:12م

<!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{
        direction: rtl;
        font-size: 40px;
        margin :0;
    }
    .unorder-list li {
        background-color: #FAFAFA;
        margin: 10px;
        padding: 10px;
        list-style-position: inside;
    }
    .check-icon {
        list-style-image: url('images/check-icon.png')
    }
    .delete-icon {
        list-style-image: url('images/delete-icon.png')
    }
    </style>
</head>
<body>
    <ul class="unorder-list">
        <li class="check-icon">دفع بالتقسيط</li>
        <li class="check-icon">شحن مجاني</li>
        <li class="check-icon">ضمانة 3 سنوات</li>
        <li class="delete-icon">قابل للإرجاع</li>
        <li class="delete-icon">قابل للإستبدال</li>
    </ul>
</body>
</html>

Ebtesam · 3 يوليو 2019، 7: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>
        body{
            direction: rtl;
            font-size: 30px;
        }
        .check-list{
            list-style-image: url('images/check-icon.png')
        }
        .delete-list{
            list-style-image: url('images/delete-icon.png')
        }
        li{
            margin:50px;
        }
    </style>
</head>
<body>
    <ul class="check-list">
        <li>دفع بالتقسيط</li>
        <li>شحن مجانى</li>
        <li>ضمان 3 سنوات</li>       
    </ul>
    <ul class="delete-list">
        <li>قابل للإرجاع</li>
        <li>قابل للإستبدال</li>
    </ul>
</body>
</html>

Alhakem · 5 يوليو 2019، 8:31ص

ممتاز

Alhakem · 5 يوليو 2019، 8:33ص

ما قمتي به يحقق الغاية لكن قمتي بعمل قائمتين ul منفصلات. لا نريد ذلك لأننا نريد إعتبار هذه القائمة كقائمة واحدة.

NAJM · 5 يوليو 2019، 10:50ص

استاذ هل في دروس اخرا بعد المهمه

Alhakem · 6 يوليو 2019، 10:45ص

نعم أنا الأن اعمل عليهن

mofi · 8 يوليو 2019، 12:16م

اش رايكم اكمل ؟
list

mofi · 16 يوليو 2019، 7:35ص

لقد قمت بعمل قائمة واحدة 
body{
    direction: rtl;
    font-size: 20px;
}
ul{
    margin:0 0 0 100px;
}
li{
    list-style-type: disc;
    list-style-position: inside;
margin: 5px;
width: 400px;
height: 50px;
background-color: gainsboro;
line-height: 50px
}
.check-list{
    list-style-image: url('images/check_vert.png');

}
.delete-list{
    list-style-image: url('images/iconfinder_gtk-cancel_28412.png');

}

<body>
    <ul >
        <li class="check-list">دفع يالتقسيط</li>
        <li class="check-list">شحن مجاني</li>
        <li class="check-list">ضمانة 3 سنوات</li>
        <li class="delete-list">قابل للإرجاع</li>
        <li class="delete-list">قابل للإستبدال</li>
    </ul>

  
    
</body>
</html>

NAJM · 15 يوليو 2019، 11:38ص

‏ أستاذ هل راح نتعلم لغة JS ؟
متى ستبدأ الدروس الجديدة ؟

Alhakem · 15 يوليو 2019، 4:51م

قمتي بعمل قائمتي ul منفصلتين

بدنا نخليها قائمة واحدة

Alhakem · 15 يوليو 2019، 4:52م

‏ أستاذ هل راح نتعلم لغة JS ؟

نعم بالتأكيد.

متى ستبدأ الدروس الجديدة ؟

سيتم طرح مجموعة الدروس الجديدة خلال الأسبوعين القادمين

mofi · 16 يوليو 2019، 7:36ص

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