ربما يكون إنشاء القائمة أحد النقاط الرئيسية في تطوير المواقع والبرامج. بالإضافة إلى ذلك ، فإن التفصيل الجيد والتصميم المنطقي لمثل هذه القائمة هو وجه موقع أو أي برنامج. على سبيل المثال ، لنأخذ Microsoft ونظام التشغيل Windows 7. بعد إصدار Windows 7. سمعت Microsoft الكثير من الانتقادات التي لم تكن مجاملة لنفسها. كان هناك العديد من الانتقادات ، ولكن في أغلب الأحيان تم وضع عناصر قائمة بشكل غير ملائم. اقرأ هذا البرنامج التعليمي بعناية حول كيفية إنشاء قائمة منسدلة أفقية باستخدام CSS و Expression Web. ستتغير أنماط العلامات لإنشاء القائمة
تعليمات
الخطوة 1
انتقل إلى إدارة الأنماط ثم انقر فوق الزر نمط جديد. أدخل اسم Selector ul li إلى النمط الجديد الذي أنشأته للتو. تذكر أيضًا أن تتأكد من ضرورة تحديد النمط الجديد في ملف المنسدلة.css.
الخطوة 2
لتمديد قائمة أفقية ، عليك إخبار عناصر القائمة بأنها ستكون أفقية. بعد ذلك ، تحتاج إلى تحديد عرض كل عنصر من عناصر القائمة وإزالة جميع النقاط غير الضرورية أمام جميع عناصر القائمة.
الخطوه 3
للمحاذاة الأفقية ، انتقل إلى التخطيط واضبط سمة العرض على السطر. اضبط السمة العائمة على اليسار. انقر فوق الزر "تطبيق". يجب تعيين كافة عناصر القائمة في سطر واحد. لكي لا تتداخل مع بعضها البعض ، عليك القيام بما يلي: تعيين قيمة الموضع لسمة العرض إلى 150 بكسل. الآن تحقق من ذلك. يجب أن تصبح جميع عناصر القائمة بنفس الحجم.
الخطوة 4
نحتاج الآن إلى محاولة إزالة النقاط الموجودة أمام عناصر القائمة. للقيام بذلك ، انتقل إلى قائمة وقم بتعيين سمة نوع القائمة إلى لا شيء.
الخطوة الخامسة
انقر فوق "موافق" لقبول كافة التغييرات.
الخطوة 6
لضبط حجم الخط لنمط ul li ، عليك القيام بما يلي. في إدارة الأنماط ، انقر بزر الماوس الأيمن على نمط ul li الذي تريده لتحديد تعديل النمط. سيتم فتح مربع الحوار المألوف لإضافة السمات أو تغييرها. انتقل إلى فئة الخط وقم بتعيين سمة عائلة الخطوط على Arial و Helvetica و sans-serif. بعد ذلك ، انتقل إلى سمة حجم الخط وقم بتعيينها على 0.9em. بعد ذلك ، قم بإعداد سمة تحويل النص ، واضبط القيمة الخاصة بها على الأحرف الكبيرة.
الخطوة 7
يمكن ضبط ارتفاع العناصر في القائمة التي تم إنشاؤها في فئة الموضع. اضبط سمة الارتفاع على 30 بكسل.
الخطوة 8
بعد ذلك ، تحتاج إلى حفظ ملف menu.html. للقيام بذلك ، ستفتح Expression Web نافذة حفظ الملفات المضمنة المطلوبة لحفظ الملف. حفظ في ملف المنسدلة.css. انقر فوق "موافق" للحفظ.
الخطوة 9
تحقق الآن من نتيجتك. من أجل الموثوقية ، من الأفضل اختبارها في متصفحات مختلفة. للتحقق من النتيجة التي تم الحصول عليها في المتصفح الافتراضي ، يجب عليك الضغط على المفتاح F12 على لوحة المفاتيح.
