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

Alhakem · 1 مايو 2019، 2:13م

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

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

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

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

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

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

benyahia32 · 1 مايو 2019، 5:21م

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

Souf · 1 مايو 2019، 5:41م

<!DOCTYPE html>
<html >
   <head>
       <meta charset="utf-8">
       <title> موقع البيع </title>
       <style> 
           body {
              direction: rtl;
              font-size: 25px;
           }
           ul li {
              background-color: #d2d2d2;
              margin: 5px;
              border: 2px groove #c3c3c3;
              padding: 4px 10px 0 0;
           }
           .list-check {
               list-style-position: inside;
               list-style-image: url("check.png");
           }
           .list-delete {
               list-style-image: url('delete.png');
           }
       </style>
   </head>
   <body>
       <ul class="list-check">
         <li> دفع بالتقسيط </li>
         <li> شحن مجاني </li>
         <li> ضمانة 3 سنوات </li>
       </ul>
       <ul class="list-delete">
         <li> قابل للإرجاع </li>
         <li> قابل للاستعمال </li>
       </ul>
   </body>
</html>

Alhakem · 1 مايو 2019، 6:04م

ممتاز وأيقونات لطيفة

Alhakem · 1 مايو 2019، 6:05م

عمل رائع كل شئ مضبوط الا أنه يلزمك تعمل تعديل بسيط وجعلها قائمة ul واحدة بدلاً من إثنتين

Souf · 1 مايو 2019، 8:04م

هل يمكن تقسيم li باستعمال عنصر div

Alhakem · 1 مايو 2019، 8:20م

لا لايمكنك ذلك

ربما إذا قمت بمراجعة ملاحظات دروس تنسيقات القوائم قد تجد شئ مفيد

Souf · 2 مايو 2019، 7:43ص

<!DOCTYPE html>
<html>
   <head>
       <meta charset="utf-8">
       <title> موقع البيع </title>
       <style> 
           body {
              direction: rtl;
              font-size: 25px;
           }
           ul li {
              background-color: #d2d2d2;
              margin: 5px;
              border: 2px groove #c3c3c3;
              padding: 4px 10px 0 0;
           }
           .list-check {
               list-style-position: inside;
               list-style-image: url("check.png");
           }
           #list-check3 {    
               margin-bottom: 20px;
           }
           .list-delete {
               list-style-image: url('delete.png');
           }
       </style>
   </head>
   <body>
       <ul>
         <li class="list-check"> دفع بالتقسيط </li>
         <li class="list-check"> شحن مجاني </li>
         <li class="list-check" id="list-check3"> ضمانة 3 سنوات </li>
         <li class="list-delete"> قابل للإرجاع </li>
         <li class="list-delete"> قابل للاستعمال </li>
       </ul>
   </body>
</html>

Alhakem · 2 مايو 2019، 8:00م

الأن ممتاز

فقط خذ في عين الإعتبار بأنك لم تقوم بإدخال الأيقونات في الصناديق الخاصة بالعناصر list-delete

Wan · 2 مايو 2019، 7:21م

مرحباً

<!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: 30px;
    }
    .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>

Alhakem · 2 مايو 2019، 8:00م

ممتاز مروان

Wan · 2 مايو 2019، 8:27م

شكراً جزيلااااا…
أستاذ محمد لقد واجهتني مشكلة صغيرة وأحتاج لبعض المساعدة… استخدمت ملف التنسيقات الخارجي ولكن لم ينجح في إظهار الايقونات التي اضفتها للقائمة مع أنه نجح في اظهار باقي التنسيقات الأخرى، ولكن عندما قمت بدمج التنسيقات داخل ملف الـ html نفسه ظهرت الايقونات.

Alhakem · 2 مايو 2019، 8:36م

لا شكر على واجب

حاول تبحث عن حل المشكلة وكيف تقوم بتصحيح مسار الصورة حتى يستطيع ملف التنسيقات الوصول إليها، بهذه الطريقة تكسب الخبرة ،

ومن ثم إطلع على جوابي على محمد في الموضوع التالي بنفس المشكلة.

كيفية اضافة ايقونة الى القائمة الأسئلة والاستفسارات

السلام عليكم عندي مشكلة في المهمة الاخيرة من ورشة الفرونت ايند مطلوب اضيف ايقونة الى الليست ايتم كتبت الكود كامل وحملت الايقونات الي اريد استخدمهم وضفتهم في المجلد المخصص ولكن المشكلة عندما استدعيهم عن طريق الcss لاتظهر الصور وتاكدت من مسار الملف اكثر من مرة ولكن عندما ابدل مسار الصور برابط صورة من الانترنت تظهر ولكن المشكلة ليش الايقونات الي بالملف لايعمل <!DOCTYPE html> <html lang="en"> <head> <title>List</title> <meta charset="UTF-8"> <link rel="stylesheet" type="text/css…

Wan · 2 مايو 2019، 8:47م

حسنا حسنا فهمت ذلك

شكرا لدعمكم المتواصل
كل التحية والتقدير والامتنااااااان
اطلعت على الجواب الخاص بك أستاذ محمد ونجح الامر الحمد لله.

Alhakem · 2 مايو 2019، 9:01م

Souf · 2 مايو 2019، 10:18م

نعم اخي فقط اردت ان استعمل الاثنين معا شكرا على الملاحظات
⁦:heart:⁩:green_heart:

Alhakem · 2 مايو 2019، 10:54م

اها، اوكي

moimad · 3 مايو 2019، 8:58ص

مرحباً
هذا حل المهمة مع بعض اللمسات الصغيرة
LIVE DEMO

HTML

<!DOCTYPE html>
<html lang="en">
 <head>
    <title>List</title>
    <meta charset="UTF-8">
    <link rel="stylesheet" type="text/css" href="css/style.css">
    <link href="https://fonts.googleapis.com/css?family=Tajawal" rel="stylesheet">
 </head>
 <body>
   <div id="div">
    <ul>
        <li class="list-check">دفع بالتقسيط</li>
        <li class="list-check">شحن مجاني</li>
        <li class="list-check">ضمان 3 سنوات</li>
        <li class="list-uncheck">قابل للأرجاع</li>
        <li class="list-uncheck">قابل للأستبدال</li>
    </ul>
   </div>
 </body>
</html>

CSS

body {
    direction: rtl;
}

ul {
    list-style-position: inside;
    font-size: 25px;
    padding: 10px;
    color: #fff;
    font-family: 'Tajawal', sans-serif;
}

.list-check {
    list-style: none;
    transition-duration: 0.5s;
}
.list-check:hover {
    list-style-image: url('../images/check.png');
}
.list-uncheck {
    list-style: none;
    transition-duration: 0.5s;
}
.list-uncheck:hover {
    list-style-image: url('../images/uncheck.png');
}

#div {
    width: 200px;
    background-color: #17304e;
    border-radius: 4px;
    padding: 20px;
    align-items: center;
    margin: 100px auto;


}

hamzaabueyada · 3 مايو 2019، 5:12م

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

<!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 href="https://fonts.googleapis.com/css?family=Cairo" rel="stylesheet">
    <title>Document</title>
    <style>
    body{
        direction: rtl;
        font-size: 20px;
        font-family: Cairo;
    }
    
    .check{
        list-style-image: url('images/check.svg');
        font-size: 19px;
    }

    .delete{
        list-style-image: url('images/delete.svg');
        font-size: 19px;
    }

    .box{
        width: 550px;
        height: 230px;
        border: solid 1px rgb(0, 192, 96);
        display:flex;
    }

 
    </style>
</head>
<body>

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

</div>    


</body>
</html>

Alhakem · 3 مايو 2019، 8:32م

عمل رائع محمد.

لاحظت أنك قمت بإستخدام الخاصية transition-duration بهدف إضافة ذلك التأثير للخاصية list-style ولكن إذا ما شاهدت النتيجة وقمت بتمرير الماوس على عناصر القائمة ستجد بأن هذه الخاصية لا تقوم بأي دور.

والسبب يعود إلى أن هناك قائمة محددة للخصائص التي بالإمكان عمل animation لها، تستطيع الإطلاع على قائمة تلك العناصر من خلال المصدر أدناة وستجد بأن الخاصية list-style ومشتقاتها ليست من ضمنها