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

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 ومشتقاتها ليست من ضمنها

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

جميل ي حمزة

mahmoud_rashad · 7 مايو 2019، 9:40ص


<!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
                }
                ul li {
                    padding: 10px;
                    margin: 10px;
                    background-color: #e8e7e7;
                    list-style-position: inside;
                }

                ul .check {
                    list-style-image: url('images/check.png')
                }

                ul .delete {
                    list-style-image: url('images/delete.png')
                }
            </style>
        </head>
        <body>
            <ul>
                <ul class="check">
                    <li>دفع بالتقسيط</li>
                    <li>شحن مجاني</li>
                    <li>ضمانه 3 سنوات</li>
                </ul>
                <ul class="delete">
                    <li>قابل للإرجاع</li>
                    <li>قابل للأستبدال</li>
                </ul>
            </ul>
        </body>
    </html>

Alhakem · 7 مايو 2019، 9:18م

رائع محمود

mohamedkhalil · 13 مايو 2019، 7:05ص

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>testing</title>
        <style>
    body{
        direction: rtl;
        font-size: 24px;
        font-weight: bold;
    }
    ul li{
        background-color: #fafafa;
        margin: 10px;
        list-style-position: inside;
        padding: 10px;

    }
    .check{
        list-style-image: url('check.png');
    }
    .delete{
        list-style-image: url('delete.png');
    }
            
    
    </style>
    </head> 
    <body>
        <ul >
            <li class = " check">دفع بالتقسيط</li>
            <li class = " check">شحن مجاني</li>
            <li class = " check">ضمانة 3 سنوات</li>
            <li class = " delete">قابل للارجاع</li>
            <li class = " delete">قابل للاستبدال</li>
        </ul>
    </body> 
</html>

Alhakem · 13 مايو 2019، 10:58ص

رائع محمد

asmaa_salih · 16 مايو 2019، 4:20ص

html code

<!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>home</title>
    <link href="https://fonts.googleapis.com/css?family=Changa" rel="stylesheet">
    <link rel="stylesheet" href="css/style.css">
</head>
<body>
    <ul>
        <li class="check">دفع بالتقسيط</li>
        <li class="check">شحن مجاني</li>
        <li class="check">ضمانة 3 سنوات</li>
        <li class="delete">قابل للاسترجاع</li>
        <li class="delete">قابل للاستبدال</li>
    </ul>
</body>
</html>

css code

body {
    direction: rtl;
    background-color: #ffff;
    font-family: 'Changa';
}
ul {
    font-size: 30px;
    list-style-position: inside; 
    
}
li {
    background-color: #FAFAFA;
    margin:20px 20px 10px 20px;
    padding: 10px;
    
}
.check {
    list-style-image: url('../images/check-icon2.png');  
}
.delete {
    list-style-image: url('../images/delet-icon2.png');
}

Alhakem · 16 مايو 2019، 6:28م

مية مية