Menu
Coddy logo textTech
ابدأ التعلم
flag Ar iconالعربيةdown icon

Circular Progress ::before

الدرس 8 من 11 في دورة شريط تقدم دائري | مشروع واجهة أمامية على Coddy.

الآن علينا كتابة CSS لـ:

.circular-progress::before{
    /*اكتب أدناه*/

}

إذا شعرت أنك عالق، ببساطة تحقق من التلميح.

challenge icon

التحدي

سهل
  1. قم بتعيين content إلى “”
  2. قم بتعيين position إلى absolute
  3. قم بتعيين height و width إلى 190 بكسل.
  4. قم بتعيين border radius إلى 50%.
  5. قم بتعيين background color ليكون مشابهاً لذلك الخاص بالفئة circular-progress.

جرّب بنفسك

<!DOCTYPE html>
<html>
<head>
    <link rel="stylesheet" href="styles.css">
</head>
    <body>
        <!-- Write HTML code here -->
        <script src="script.js"></script>
    </body>
</html>

جميع دروس شريط تقدم دائري | مشروع واجهة أمامية

1مقدمة

ماذا ستصنع؟

4JavaScript

اجعله يعمل!درس مشروع

2HTML

الإعدادإنهاء HTMLدرس مشروع

3CSS

المحدد العام (Universal Selector)درس مشروعوسم Bodyدرس مشروعكلاس Containerدرس مشروعكلاس Circular Progressدرس مشروعCircular Progress ::beforeدرس مشروعكلاس Progress Valueدرس مشروعكلاس Textدرس مشروع