يعد إنشاء القوائم أحد أهم الجوانب في تطوير البرامج والمواقع الإلكترونية. يجب أن تؤخذ Microsoft وأشهر أفكارها ، نظام التشغيل Windows ، كمثال رئيسي. على الرغم من أن الغالبية العظمى من مستخدمي الكمبيوتر الشخصي في العالم يستخدمون هذا المنتج ، فإن النقد لا ينقص فقط ، بل يتزايد باستمرار. في الأساس ، يتعلق الأمر بإزعاج موقع عناصر القائمة. فيما يلي وصف لكيفية إنشاء قوائم في CSS و Expression Web.
تعليمات
الخطوة 1
لبدء إنشاء قائمة أفقية ، انتقل إلى إدارة النمط ، ثم انقر على زر نمط جديد. قم بتسمية محدد النمط الجديد ul li. مهم! تأكد من أن الملف الذي تم إنشاؤه يحتوي على ملحق القائمة المنسدلة.css. لعمل قائمة أفقية ، وضح للعنصر الذي تم إنشاؤه أنه سيكون أفقيًا تمامًا. بعد ذلك ، حدد عرض كل عنصر من عناصر القائمة وقم بإزالة جميع النقاط غير الضرورية الموضوعة أمام جميع العناصر الموجودة في القائمة.
الخطوة 2
انتقل إلى الخيار Layout ، واضبط سمة العرض على Inline للقيام بمحاذاة أفقية. بعد ذلك ، اضبط القيمة اليسرى على سمة Float وانقر فوق الزر Apply. اضبط كل عناصر القائمة على سطر واحد. حتى يتم وضعها بدقة وعدم الزحف فوق بعضها البعض ، في سمة العرض ، اضبط قيمة الموضع على 150 بكسل. تأكد من أن جميع عناصر القائمة بنفس الحجم. بعد ذلك ، قم بإزالة النقاط الموجودة أمام جميع العناصر - لهذا ، انتقل إلى سمة القائمة وقم بتعيين معلمة None في عنصر List Style-type. انقر فوق "موافق" ليتم قبول كافة التغييرات وتطبيقها.
الخطوه 3
اضبط حجم الخط ونمطه لـ ul li. للقيام بذلك ، انتقل إلى إدارة الأنماط وانقر بزر الماوس الأيمن على ul li ، ثم حدد تعديل النمط. سيظهر مربع الحوار المألوف. انتقل إلى الخط وحدد سمة عائلة الخط وقم بتعيينها على Sans-serif و Arial و Helvetica. بعد ذلك ، اضبط حجم الخط عن طريق تعيينه على 0 ، 9. بعد ذلك ، اضبط سمة تحويل النص على الأحرف الكبيرة. اضبط ارتفاع عناصر القائمة في سمة الارتفاع - الموضع ، واضبط القيمة على 30 بكسل.
الخطوة 4
بعد الانتهاء من جميع الإجراءات التصحيحية ، احفظ الملف باسم menu.html. بعد ذلك ، اختبر القائمة التي تم إنشاؤها في متصفحات مختلفة للتأكد من أنها تعمل بشكل صحيح. كما ترى ، فإن تصميم القائمة الأفقية بسيط للغاية.
