📚 تنسيق قسم القائمة
المفاهيم الأساسية
القائمة (Menu): قسم يحتوي على عناصر يجب عرضها بشكل مختلف في الأجهزة المختلفة.
خريطة المفاهيم
```markmap
تصميم الموقع الإلكتروني
أنواع CSS
صفحات الأنماط المضمنة (Inline style)
صفحات الأنماط الداخلية (Internal style sheets)
صفحات الأنماط الخارجية (External style sheets)
الموقع الإلكتروني المستجيب
التصميم المستجيب
#### الأدوات
##### استعلامات الوسائط (Media Queries)
###### أماكن الاستخدام
####### داخل ملف HTML (CSS الداخلي)
####### داخل ملف CSS خارجي
######### استعلام الوسائط في ملف CSS خارجي
######## يوضع في نهاية ملف CSS
######## مثال تطبيقي
######### الشرط: `@media screen and (max-width: 800px)`
######### الإجراء: `img { width: 70%; height: auto; }`
######## الشرح
######### يعمل على الأجهزة التي يصل عرض إطار العرض (Viewport Width) إلى 800 بكسل
######### يتم تصغير عرض الصورة إلى 70% إذا تغير ارتفاع الصورة تلقائياً
######### يؤثر في أبعاد الصور التي يقل عرضها عن 800 بكسل
######## تنسيق الصور باستخدام استعلامات الوسائط
######### الشرط: `@media screen and (max-width: 900px)`
########## الإجراء: `img { width:50%; margin: 6px; }`
######### الشرط: `@media screen and (max-width: 700px)`
########## الإجراء: `img { width:100%; height: auto; }`
######## خطوات التطبيق
########## 1. إضافة استعلامات الوسائط في ملف CSS
########## 2. تنسيق العناصر في فئة محددة (Class)
########## 3. حفظ ملف CSS وفتح الصفحة في المتصفح
########## 4. تغيير حجم نافذة المتصفح لرؤية تغير أبعاد الصور
######### اختبار التصميم المستجيب
########## محاكاة المتصفح
############ بيئة محاكاة مايكروسوفت إيدج
############ الغرض: محاكاة الأجهزة ذات عرض الشاشة المختلف ومعرفة كيف تتغير أبعاد الصور
############ مثال: في نافذة متصفح بعرض 1100 بكسل، لا تتأثر الصور باستعلامي الوسائط المؤثرين على الشاشات ≤ 900 بكسل
########## تأثير استعلامات الوسائط عند عرض إطار عرض محدد
############ عرض 700 بكسل
############# يتم تطبيق الاستعلام على الأجهزة بعرض شاشة 700 بكسل وأقل (حتى 701 بكسل)
############# يقل مقياس عرض الصور إلى 50%
############ عرض 900 بكسل
############# يتم تطبيق الاستعلام على الأجهزة بعرض شاشة 900 بكسل وأقل (حتى 701 بكسل)
############# يقل مقياس عرض الصور إلى 50%
تنسيق قسم القائمة
استخدام استعلامات الوسائط
#### لتنسيق عناصر القائمة في الأجهزة المختلفة
إضافة مقطع CSS
#### في الفئة المقابلة لملف CSS
خصائص CSS لقائمة (.menu)
#### `.menu`
##### background-color: #426C35;
##### overflow: auto;
#### `.menu ul`
##### text-align: center;
##### padding-top: 20px;
##### padding-bottom: 20px;
##### text-decoration: none;
#### `.menu li`
##### display: inline-block;
##### text-align: center;
#### `.menu li a`
##### display: inline-block;
##### height: auto;
##### width: 150px;
##### color: #333333;
##### background-color: #f5f5f5;
##### padding: 10px;
##### margin: 4px;
##### text-align: center;
##### font-size: 18px;
##### font-weight: bold;
##### text-decoration: none;
##### border-radius: 4px;
#### `.menu li a:hover`
##### background-color: #d6d599;
العرض
#### توضح عناصر القائمة أفقياً في سطر واحد
```
نقاط مهمة
- يمكن استخدام استعلامات الوسائط لتنسيق عناصر القائمة (Menu) بشكل مختلف في الأجهزة المختلفة.
- يتم إضافة المقطع البرمجي لتنسيق القائمة في الفئة `.menu` داخل ملف CSS.
- تظهر عناصر القائمة أفقياً في سطر واحد باستخدام `display: inline-block;` للعنصر `
- `.
- يغير المؤشر عند التحويم (`:hover`) لون خلفية عنصر القائمة إلى `#d6d599`.