تحدي المراجعة

جزء من قسم Styling with CSS في رحلة HTML على Coddy — الدرس 60 من 76.

التحدي

سهل

بعد أن تعلمت تقنيات تحديد المواقع المختلفة في CSS، بما في ذلك relative و absolute و fixed و z-index، حان الوقت لاختبار معرفتك من خلال تحدٍ شامل. سيساعدك هذا التحدي على ترسيخ فهمك لكيفية استخدام هذه الخصائص معاً لإنشاء تخطيطات معقدة وديناميكية. ستقوم بتطبيق ما تعلمته حول كل نظام تحديد مواقع لإعادة إنشاء تصميم محدد.

لقد تم تزويدك بمستند HTML لموقع مطعم بيتزا. مهمتك هي استخدام خصائص تحديد المواقع في CSS لتنسيق العناصر التالية لإنشاء تخطيط نظيف ومنظم.

اتبع الخطوات أدناه:

تنسيق الرأس (Header Styling):
- استهدف عنصر <header>.
- اضبط الخاصية position على fixed ليبقى في الجزء العلوي من الصفحة.
- اضبط top على 0، و left على 0، و width على 100% لضمان امتداده على كامل عرض الصفحة.
- استخدم z-index بقيمة 10 لضمان بقاء الرأس فوق العناصر الأخرى في الصفحة.
تنسيق قسم القائمة (Menu Section Styling):
- استهدف فئة .menu.
- اضبط الخاصية position على relative للسماح بتحديد موقعه بالنسبة لموقعه الطبيعي في تدفق الصفحة.
تنسيق صندوق العروض (Promotions Box Styling):
- استهدف فئة .promotions.
- اضبط الخاصية position على absolute لوضعه بالنسبة لقسم .menu.
- اضبط top على 100px و right على 20px لوضعه في أعلى يمين القائمة.
- استخدم z-index بقيمة 5 للتأكد من بقائه أسفل الرأس ولكن فوق المحتويات الأخرى في القائمة.

ورقة مرجعية

تسمح لك خصائص تحديد المواقع في CSS بالتحكم في موضع العناصر:

تحديد الموقع الثابت (Fixed positioning): يظل العنصر في مكانه عند التمرير

header {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 10;
}

تحديد الموقع النسبي (Relative positioning): يتم وضع العنصر بالنسبة إلى موضعه الطبيعي

.menu {
  position: relative;
}

تحديد الموقع المطلق (Absolute positioning): يتم وضع العنصر بالنسبة إلى أقرب عنصر أب محدد الموقع

.promotions {
  position: absolute;
  top: 100px;
  right: 20px;
  z-index: 5;
}

Z-index: يتحكم في ترتيب تكديس العناصر المحددة المواقع (القيم الأعلى تظهر في الأعلى)

جرّب بنفسك

<html>
<head>
    <title>Pizza Restaurant</title>
    <style>
        /* Fixed Header */
        header {
            background-color: #ff6f61;
            padding: 20px;
            text-align: center;
            font-size: 24px;
            color: white;
        }
        /* Menu Section (Relative) */
        .menu {
            margin-top: 70px; /* Space for fixed header */
            padding: 20px;
            background-color: #f8f8f8;
            font-size: 18px;
        }
        /* Promotions Box (Absolute) */
        .promotions {
            background-color: #ffdf00;
            padding: 10px;
            font-size: 20px;
            border-radius: 10px;
        }
    </style>
</head>
<body>
    <!-- رأس ثابت -->
    <header>
        Pizza Restaurant
    </header>
    <!-- قسم القائمة -->
    <div class="menu">
        <h2>Our Menu</h2>
        <ul>
            <li>Margherita</li>
            <li>Pepperoni</li>
            <li>Veggie</li>
            <li>Hawaiian</li>
        </ul>       
        <p>Order now and enjoy!</p>
    </div>
    <!-- صندوق العروض -->
    <div class="promotions">
        <p>Get 20% off your first order!</p>
    </div>
    <div class="pizza-info">
        <h2>About Pizza</h2>
        <p>Pizza, a dish with origins in Italy, is one of the world's most beloved foods. It was first made in Naples during the 18th century, with the classic Margherita pizza being named after Queen Margherita of Savoy. The traditional pizza is known for its simple ingredients: a thin crust, tomato sauce, mozzarella cheese, and fresh basil.</p>
        <p>Over the years, pizza has evolved into a variety of regional styles, from thin-crust New York-style pizza to deep-dish Chicago pizza. While the toppings have diversified, the tradition of sharing a pizza with family and friends remains an essential part of the pizza experience.</p>
        <p>In Italy, pizza is often enjoyed casually, typically paired with a glass of wine or soda. It is a symbol of Italian culture, and many believe that a good pizza is a representation of the country's culinary expertise and passion for food.</p>
        <p>Pizza's global reach has led to many variations and adaptations in different countries. In Japan, for example, toppings like teriyaki chicken and squid are popular, while in Brazil, green peas and corn are commonly found on pizzas. In the United States, pizza has become a staple of fast food, with different regions offering their unique twists, such as the deep-dish pizza from Chicago and the thin crust of New York City.</p>
    </div>
</body>
</html>