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

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

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

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title> مهمة التدرب على تنسيقات القوائم</title>
        <style>
        body{
            direction: rtl;
            font-size: 25px;
        }
        ul li{
            background-color: #F0ECEB;
            padding: 20px;
            margin: 10px;
            list-style-position: inside;
        }
        .check{
            list-style-image: url('image/check.png')
        }
        .delete{
            list-style-image: url('image/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>
2 Likes
#63

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

<!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>
    ul li {
         
         margin: 4px ;
         background: rgb(248, 248, 248);
         list-style: inside ;
         padding :30px;
         list-style-image: url('image/iconfinder.png');
         transition:0.1s;    
           }
     ul li:hover{
         background: beige;

     }
     ol li{
        margin: 4px ;
         background: rgb(248, 248, 248);
         list-style: inside ;
         padding :30px;
         list-style-image: url('image/close.png');
         transition: 0.1s

     }
     ol li:hover{
         background: greenyellow;
         
     }

    
    </style>
</head>
<body>
    <ul>
        <li class="list">دفع بالتقسيط</li>
        <li class="list">شحن مجاني</li>
        <li class="list">ضمان 3 سنوات</li>
   </ul>
   <ol>
        <li class="delete">قابل للارجاع</li>
        <li class="delete">قابل للاسترجاع</li>
    </ol>
</body>
</html>
2 Likes
#64

مضبوط :+1:

#65

ممتاز ولكن لماذا قمت بعمل قائمتين منفصلتين الاولى ul والثانية ol؟

1 Like
#66

حتى اتمكن من وضع علامتين مختلفتين للعناصر

#67

استاذ متى تعود الدروس من جديد ؟؟؟:thinking:

3 Likes
#68

كلنا منتظرين الدروس القادمة :smile:

2 Likes
#69 
<!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>
    <link rel="stylesheet" href="style.css">
    
</head>
<body>
    <ul>
        <li class=" mark-check">دفع بالتقصيد</li>
        <li class=" mark-check">شحن مجاني </li>
        <li class=" mark-check">ضمانة 3 سنوات</li>
        <li class=" mark-delete">قابل للارجاع</li>
        <li class=" mark-delete">قابل للأستبدال</li>
    </ul>

    
</body>

</html>
1 Like
#70 
body{
    direction: rtl;
    font-size: 24px;
    list-style-position: inside;

}
.mark-check{
    list-style-image: url('images/check.png')
}
.mark-delete{
    list-style-image: url('images/delete.png')
}
ul li{
    background-color:#FAFAFA; 
    margin: 10px;
    padding: 5px;
    height: 30px ;
}
1 Like
#71

ممتاز ي بسام مية مية :+1:

1 Like
#72 
<!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;
          }
          .unordered-list li{
              font-size:30px;
              background-color:#FAFAFA;
              margin:10px;
              padding:10px;
              list-style-position: inside;
              list-style-image:url('img/check.png')
          }
          .unordered-list li.cross{
              list-style-image:url('img/cross.png') 
          }
    </style>
</head>
<body>
    <ul class="unordered-list">
        <li>دفع بالتقسيط</li>
        <li>شحن مجاني</li>
        <li>ضمانة 3 سنوات</li>
        <li class="cross">قابل للارجاع</li>
        <li class="cross">قابل للاستبدال</li>
        
    </ul>
    
</body>
</html>
1 Like
#73 
<!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>List styling</title>
    <style>

        .list-styling{
            font-size: 30px;
            direction: rtl;
            list-style-position: inside;
            list-style-type: unset;
        }

        .list-styling li{
            background-color: #c8e0e6;
            border: 1px solid #999;
            margin: 10px;
            padding: 10px;
        }

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

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

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

أحسنتم، كل واحد إشتغل بطريقتة والنتيجة واحدة وممتازة :+1:

@simoprine
@ArijTrabelsi

1 Like
#76

مشكور :rose:

1 Like
#77 
<!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>مهمة التدرب على التنسيقات</title>
  <style>
     .ordered-list{
       direction: rtl;
       font-size: 35px;
       list-style-position: inside;
       margin: 30px 150px;
     }
     .ordered-list li{
       margin: 10px;
       padding: 5px;
       background-color: lightcyan;

     }
     .check{
       list-style-image: url('images/chek.png');
     }
     .none{
       list-style-image: url('images/delete.png');
     }

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

Annotation%202019-08-19%20125912
Annotation 2019-08-19 125912.png1366×573 16.5 KB

1 Like
#78

ممتاز، لكن هل ترى ان الانسب لهذه القائمة هي قائمة مرتبه ام غير مرتبة؟

#79

Screenshot_2019-09-16%20List

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>List</title>
    <style>
        body{
            direction: rtl;
            font-size:30px;
        }
        .check{
            list-style-image: url('image/t.svg');
        }
        .delete{
            list-style-image: url('image/d.png');
        }
        ul{
           margin:20px ;
        }
        ul li{
            padding-top:14px;
        }
    </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>
1 Like
#80

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

CSS

body{
    direction: rtl;
    font-size: 20px;
}
.check{
    list-style-image: url('images css/check.png')
}
.delete{
    list-style-image: url('images css/delete.png')
}

3

كان معايا مشكلة بالرجوع للملف الرئيسي فقمت بانشاء ملف صور في CSS%D8%A8%D8%AF%D9%88%D9%86%20%D8%B9%D9%86%D9%88%D8%A7%D9%86
%D8%B9

1 Like
#81

رائع ي نائف :+1:

1 Like
#82

عمل ممتاز ي ناصر ولكن أريد منك إعادة العمل على الكود بحيث يكون لدينا قائمة ul واحدة فقط.

ان معايا مشكلة بالرجوع للملف الرئيسي فقمت بانشاء ملف صور في CSS

حل رائع وسنتطرق لهذه المشكلة وكيفية الوصول الى اي صورة او ملف في درس قادم

1 Like