تحدي المراجعة
جزء من قسم التنسيق باستخدام CSS في رحلة HTML على Coddy. الدرس 60 من 76.
التحدي
سهلبعد أن تعلمت تقنيات مختلفة لتحديد المواضع في CSS، بما في ذلك relative وabsolute وfixed وz-index، حان الوقت لاختبار معرفتك من خلال تحدٍّ شامل. سيساعدك هذا التحدي على ترسيخ فهمك لكيفية استخدام هذه الخصائص معًا لإنشاء تخطيطات معقدة وديناميكية. ستطبّق ما تعلمته عن كل طريقة لتحديد المواضع لإعادة إنشاء تصميم محدد.
أمامك مستند HTML لموقع مطعم بيتزا. مهمتك هي استخدام خصائص تحديد المواضع في CSS لتنسيق العناصر التالية وإنشاء تخطيط أنيق ومنظم.
اتبع الخطوات التالية:
- تنسيق الترويسة:
- استهدف العنصر
<header>. - عيّن position إلى
fixedليبقى في أعلى الصفحة. - عيّن top إلى
0وleft إلى0وwidth إلى100%لضمان امتداده على عرض الصفحة بالكامل. - استخدم قيمة z-index تساوي
10لضمان ظهور الترويسة فوق العناصر الأخرى في الصفحة.
- استهدف العنصر
- تنسيق قسم القائمة:
- استهدف الصنف
.menu. - عيّن position إلى
relativeللسماح بتحديد موضعه بالنسبة إلى موضعه الطبيعي في التدفق.
- استهدف الصنف
- تنسيق مربع العروض:
- استهدف الصنف
.promotions. - عيّن position إلى
absoluteلوضعه بالنسبة إلى قسم.menu. - عيّن top إلى
100pxوright إلى20pxلوضعه باتجاه أعلى يمين القائمة. - استخدم قيمة z-index تساوي
5لضمان بقائه أسفل الترويسة وفوق المحتوى الآخر في القائمة.
- استهدف الصنف
جرّب بنفسك
<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 class="promotions">
<p>Get 20% off your first order!</p>
</div>
</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>جميع دروس التنسيق باستخدام CSS
4أساسيات النصوص
لون النصعائلة الخطحجم الخطسمك الخطمحاذاة النصزخرفة النصتحدي المراجعة رقم 1تحدي المراجعة رقم 27نموذج الصندوق - الجزء الأول
ما هو نموذج الصندوق؟المسافات الداخلية (Padding)الهوامش (Margins)الحدود (Borders)العرض والارتفاعتحدي المراجعة8نموذج الصندوق (Box Model) - الجزء الثاني
تحجيم الصندوق (Box Sizing)حواف العناصر (Border Radius)التدفق الزائد (Overflow)ظل الصندوق (Box Shadow)تحدي المراجعةتدرّب بنفسك: Playground لـ Web