لوحة المتصدرين
المحتوى الأكثر حصولًا على سمعة جيدة
المحتوى الأعلى تقييمًا في 07/09/22 في كل الموقع
-
ما الافضل استخدام بوتستراب ام ميديا كويري للتجاوب مع الشاشات؟2 نقاط
-
أيهما افضل تعلم لارافيل او asp.net دعيني اضيف عليهم Django هي أيضا الأخرى من أطر تطوير مواقع ويب مبنية على بايثون. لبناء متجر الكتروني متكامل يمكنك إستخدام اي واحدة و ستقدم لك كل ميزات مطلوبة لبناء المتجر ولكن سأقوم بترتيب سهولة تطوير و تعلم على أسئلة التي سألتها من ناحية فرص العمل أيهما افضل؟ كلها لديها فرص عمل طالما أتقنت إحداها ولكن إذا تكلمنا عن فرص عمل في وطن عربي ف لارفيل أشهرها و بنسبة للشركات كبيرة asp.net أما في دول أوروبية أو أجنبية فتعتبر Django الأكثر طلبا فيعتمد تعلمك لإطار عمل معين على سوق مستهدف حسب ما ذكرت أنفا. بنسبة لنشر المشروع و تشغيله سأرتبها من أسهل الى أصعب من تجربتي. Django أسهل إيطار عمل يمكن تنصيبه و تشغيله على كل أنظمة تشغيل ويندوز و لينكس و ماك ويمكن تشغيل كود على ٣ منصات بدون اضافة إي تعديلات فكل ما عليك تثبيته هو حزمة بايثون على جهازك و من ثم تنزيل مكتبة Django بأمر واحد و لا تحتاج تثبيت سيرفر لتشغيلها و أمور أخرى تجعلها سهلة إعداد. من ثم لارفيل و asp.net تقريبآ على نفس مستوى صعوبة أو وقت مبذول لإعداد بيئة عمل تطوير علما بأن asp.net تشغلها حصري على أجهزة ويندوز عكس باقي الخيارات. إضافات مكتبات مجانية مساعدة، كل لغات برمجة لها مجتمع مطورين كبير ستجدين فيه أغلب مكتبات لتي تحتاجينها لكن مجتمع مطورين بايثون و php مستقلين أكبر فأتوقع ستجدينها بشكل أسرع في Django و لارفيل. ربط مع وسائل الدفع، موجودة و متوفر لها شرح لكل أطر عمل. أتمني أن يكون شرحي وجيز قد أضاف شئ يساعدك على تحديد مناسب لك يمكنك بحث عن ميزات كل إيطار عمل على حذا لمعرفة مزيد من تفاصيل و إختيار مناسب لك.2 نقاط
-
سوف نتحدث عن برنامج قواعد بيانات مايكروسوفت أكسس، وتحديدًا إصدار 2021، إذ يتضمن هذا الإصدار ميزات وخيارات اتصال جديدةً لإنشاء قاعدة بيانات أكثر سهولةً ويسرًا للمستخدم العادي. سوف نعتمد في هذا الدليل المستوى التأسيسي، ونهدف بذلك إلى تهيئة جميع مستخدمي الحاسوب المبتدئين بسرعة كبيرة، كما يساعد هذا الدليل المستخدمين الذين لديهم خبرة كبيرة مع الحاسوب لكنهم لا يملكون أي خبرة ببرنامج مايكروسوفت أكسس. يُغطي هذا الدليل الميزات المختلفة في واجهة البرامج، ويُقدم نظرةً عامةً موجزةً عن جميع علامات التبويب في الشريط، كما يُظهر للمستخدم كيفية تصميم وبناء قاعدة بيانات بسيطة، إذ يتميز هذا الدليل بتغطية الأساسيات وكيفية استخدام النماذج والتقارير، وينبغي أن يتمكن المستخدم -بنهاية هذا الدليل- من إنشاء واستخدام قواعد البيانات وإدخال بيانات جديدة بسهولة تامة، ومن ثَمَّ إدارة البيانات الموجودة. برنامج قاعدة بيانات مايكروسوفت أكسس Microsoft Access هو أحد تطبيقات مجموعة مايكروسوفت أوفيس Microsoft Office لإدارة قواعد البيانات، ويتضمن الإصدار 2021 تحسينات في واجهة المستخدم، كما يمتاز بعدد من القوالب المُعدة مسبقًا لمساعدتك في تشغيلها بأسرع ما يمكن، فقد بذلت شركة مايكروسوفت جهدًا كبيرًا لكي تجعلك مهيأً للعمل بأسرع ما يمكن دون مزيد من العناء. قاعدة البيانات عادةً ما تكون البيانات بها إما على شكل نَص أو أرقام، كما تُخزن هذه المعلومات في جدول واحد أو عدة جداول، وقد تتعلق معلومات أحد الجداول بمعلومات الجداول الأخرى أو بأحدها أو بالعديد منها، وقد لا تتعلق بأي جدول آخر. وعند تجميع هذه الجداول معًا بطريقة منطقية، يُشار إليها بقاعدة بيانات، وسوف نستعرض تلك المصطلحات لاحقًا في هذا الدرس. صُمم برنامج أكسس لإدخال وتحرير وتحليل البيانات في قاعدة البيانات، وتُستخدم الاستعلامات لاستخراج المعلومات من الجداول بالاستناد على معيار البحث، كما يمكن استخدام النموذج بوصفه وسيلةً سهلةً لاستعراض أو إدخال وتعديل البيانات، ويمكن لبرنامج أكسس إنشاء تقارير، مثل المبيعات ربع السنوية لكل موظف، وذلك بالاعتماد على البيانات الواردة في قاعدة البيانات. عناصر قاعدة بيانات مايكروسوفت أكسس Microsoft Access تتألف جميع قواعد البيانات مهما كانت كبيرةً أو صغيرةً من عناصر أساسية متشابهة، لنأخذ مثلًا نظرةً أساسيةً للمصطلحات المُستخدمة في قواعد البيانات، لذا فكر في الرسم البياني التالي: الحقل: يُعد الحقل أصغر جزء في قاعدة البيانات، وهو أحد الأجزاء المُحدّدة من المعلومات، مثل رقم أو كلمة أو تاريخ أو مرجع لبعض الأجزاء الأخرى من البيانات، ويكون كل عمود في أعمدة الرسم البياني من نفس نوع البيانات، مما يعني أن العمود الواحد من البيانات يكون أرقامًا فقط، وينبغي أن يكون لكل حقل من الحقول اسم مميز خاص به، وذلك على النحو التالي: جدول 1 يحتوي على ثلاثة حقول، هي: جدول 1 وجدول 2 وجدول 3. الأشخاص يحتوي على حقلين فقط، هما: الاسم والعُمر. السجل: عبارة عن حقل أو مُجموعة من الحقول مُجمعة في صف واحد، وذلك على النحو التالي: جدول 1 يحتوي على ثلاثة سجلات. الأشخاص يحتوي على ثلاثة سجلات. الجدول: يتألف الجدول من سجل أو أكثر من السجلات، كما ينبغي أن يكون لجميع الجداول ضمن قاعدة البيانات اسم مميز خاص به، وبما أن الجداول تخزن البيانات في قاعدة البيانات، فمن المهم تصميم الجداول تصميمًا صحيحًا؛ إذ توفر الأساس لبناء ما تبقى من قاعدة البيانات، وذلك على النحو التالي: جدول 1 عبارة عن جدول فردي. الأشخاص عبارة عن جدول فردي. قاعدة البيانات: تتألف قاعدة البيانات من جدول أو عدة جداول، وَيُعطى لكل قاعدة بيانات في موقع مُعين اسم خاص بها، تمامًا مثل جميع ملفات المجلد ينبغي أن يكون لكل ملف اسم خاص به. النموذج: يُستخدم النموذج للعمل مع البيانات في الجدول بسهولة ودقة تامة، وعادة ما تُستخدم النماذج في برنامج أكسس إما لإظهار سجل واحد من قاعدة البيانات للمستخدم في وقت واحد، وذلك لعرض البيانات أو تحريرها، أو لتتيح للمستخدم إمكانية إدخال بيانات جديدة في سجل واحد لقاعدة البيانات كلٍّ على حِدة. الاستعلام: هو سؤال يُطرح على قاعدة البيانات، وهنالك نوعان من الاستعلامات: تحديد وإجراء، وذلك على النحو التالي: يستخرج استعلام التحديد ويعرض البيانات وفقًا لمعيار البحث. يُعين استعلام الإجراء جميع البيانات المتعلقة بمعيار الاستعلام، ويؤدي إلى نوع من الفرز لبعض الأنواع من العمليات على البيانات، كما يُستخدم هذا الاستعلام لإضافة (تعبئة) أو حذف للبيانات، ويمكن أن يُستخدم على جدول واحد أو أكثر في قاعدة البيانات. التقرير: يُعد التقرير طريقةً شكليةً لعرض البيانات، وعادةً ما يكون لنتائج الاستعلام، كما يمكن أن تتضمن التقارير مُلخصات وحسابات ومخططات وأكثر من ذلك؛ بناءً على البيانات الراجعة من الاستعلام، وعادةً ما ترجع التقارير الشكلية في شكل مستندات مهنية مناسبة للطباعة أو التصدير أو إرسالها عن طريق البريد الإلكتروني. وحدات الماكرو: هي برامج صغيرة تنشئها في مايكروسوفت أكسس Microsoft Access لتنفّذ بعض العمليات المتقدمة، مما يجعل قاعدة البيانات أكثر سهولةً في الاستخدام. قد تبدو المصطلحات السابقة عبئًا كبيرًا عليك لكي تتذكرها، لكن لا تقلق فهذه المصطلحات سوف نستخدمها بكثرة في هذا الدليل، لذلك سوف تتمكن من تذكرها بسرعة وعن ظهر قلب. هل ترغب في برمجة قواعد بيانات وإدارتها بكفاءة وفاعلية؟ وظّف مبرمج قواعد بيانات محترف من مستقل أضف مشروعك الآن أساسيات واجهة برنامج مايكروسوفت أكسس Microsoft Access صممت واجهة برنامج قواعد البيانات أكسس لإمكانية فتحها والوصول إليها بأسرع وقت ممكن، كما يتيح لك الإصدار 2021 من برنامج أكسس Access 2021 إمكانية إنشاء قاعدة بيانات ومشاركتها في ثوان، وفّر فقط المعلومات اللازمة وسوف ينجز أكسس Access المهمة، مما يسهل عملية إنشاء البيانات الخاصة بك وبنيتها، ووضع التقارير والاستعلامات الخاصة ببياناتك في التنسيق الذي تريده، بحيث تبدو تطبيقاتك رائعةً باستمرار. لذلك، سوف نتناول في هذا الدرس الأقسام المختلفة للواجهة، وسوف نستعرض كيفية عمل كل قسم منها. فهم طريقة عرض خلف الكواليس Backstage قائمة الملف عند بدء تشغيل برنامج مايكروسوفت أكسس Microsoft Access أو أحد برامج مايكروسوفت أوفيس Microsoft Office، أو بعد النقر فوق علامة التبويب "ملف File"، يمكنك رؤية طريقة عرض "خلف الكواليس" في برنامج مايكروسوفت أوفيس Microsoft Office Backstage، فإذا كنت بحاجة إلى إنشاء ملف جديد أو فتح ملف موجود أو الطباعة أو الحفظ أو تغيير الخيارات أو غير ذلك، فطريقة عرض "خلف الكواليس" Backstage هي المكان المناسب، إذ تتضمن باختصار كل شيء تفعله بالملف. إنشاء قاعدة بيانات جديدة لإنشاء قاعدة بيانات جديدة، يمكنك النقر فوق القالب "فارغ Blank" للبدء بملف فارغ وخالٍ تمامًا إذا كنت تحب البدء من نقطة الصفر، أو يمكنك الاختيار من أحد القوالب المدرجة في المنطقة العليا، أو انقر فوق زر "جديد New" للاطلاع على قائمة أكبر من القوالب المتوفرة، وإن كنت تريد البحث عن المزيد من القوالب وتنزيلها، فتفضل بزيارة قوالب أكسس Access. فتح قاعدة بيانات موجودة تعرض لك شاشة "خلف الكواليس Backstage" القليل من آخر الملفات التي عملت عليها، فإذا لم تجد الملف الذي تريده في قائمة الملفات الأخيرة، فانقر فوق الزر "فتح Open" في جزء التنقل الأيمن، وذلك للاطلاع على مواقع الملفات التي يمكنك استعراضها للعثور على الملف؛ أما إذا كان لديك ملف وتريد التأكد من وجوده دائمًا ضمن قائمة الملفات الأخيرة، فيمكنك تثبيت هذا الملف في القائمة، لذا مرر فقط مؤشر الفأرة فوق اسم الملف، وسوف تجد أيقونة دبوس تظهر باتجاه الجانب الأيسر من اسم الملف، انقر فوقها لتثبيت الملف بحيث يظهر دائمًا ضمن القائمة، أو انقر فوق الدبوس مرةً أخرى لإلغاء تثبيت العنصر المُثبّت. أما إذا أردت إزالة عنصر من قائمة الملفات الأخيرة، فما عليك سوى النقر بزر الفأرة الأيمن فوق الملف المطلوب واختيار إزالة من القائمة، لكن لا تحدد حذف الملف ما لم ترغب حقًا في إزالة هذا الملف من النظام تمامًا. قائمة المعلومات Info من خلال هذه القائمة يمكنك الحصول على ثلاث وظائف مهمة للغاية، وهي: الحصول على معلومات عن قاعدة البيانات التي تعمل عليها، ومكان تواجدها على جهاز الحاسوب، أو الحصول على رابط لها. الكشف عن الأخطاء في ملفات قاعدة البيانات ومعالجتها، وذلك من خلال الزر "ضغط وإصلاح". قفل أو تشفير قاعدة بياناتك عن طريق كلمة مرور لتأمينها، وذلك من خلال الزر "تشفير باستخدام كلمة مرور". حفظ قاعدة البيانات تُحفظ جميع التعديلات التي أجريتها على الملف الأصلي لقاعدة البيانات من خلال النقر على زر "حفظ Save"، بينما يمكّنك النقر على زر "حفظ باسم Save As" من إنشاء نسخة من الملف الحالي بسرعة، وتجد هذا الخيار في متناول يديك إذا كنت بحاجة إلى نسخة ثانية في موقع مختلف على جهاز الحاسوب، أو إذا أردت إنشاء نسخة من هذا الملف بحيث يمكنك إجراء تغييرات عليه بدون التأثير على الملف الأصلي. الطباعة أو معاينة الطباعة سواءٌ كنت تريد حقًا إرسال هذا الملف أو التقرير إلى طابعة، أو تريد مجرد استخدام "معاينة الطباعة" لترى كيف سيبدو الملف أو التقرير إذا طبعته، فسوف تجد الأمر طباعة في جزء التنقل في طريقة عرض "خلف الكواليس" Backstage أيضًا. إدارة الأوفيس Office ستجد في الزاوية السفلية اليمنى من شاشة Backstage ثلاثة عناصر لمساعدتك في إدارة الطريقة التي يؤدي بها الأوفيس Office العمل لأجلك، ووظيفة هذه العناصر هي: الحساب: يتيح لك هذا الخيار إضافة حسابات الخدمة السحابية أو إزالتها، مثل ون درايف OneDrive أو شير بوينت SharePoint، بحيث يمكنك بسهولة حفظ الملفات إلى تلك الخدمات أو فتح الملفات من تلك الخدمات. ملاحظات: هذا الخيار هو أفضل طريقة لإعلام شركة مايكروسوفت في حال وجود شيء تحبه أو لا تحبه في تطبيقات الأوفيس Office، وتنتقل هذه الإدخالات التي تحصل عليها الشركة من العملاء من خلال هذه الأداة مباشرةً إلى فرق المنتجات لديها، وتساعد في دفع التغييرات والتحسينات المستقبلية في المنتجات. خيارات: هذا هو المكان الذي يمكنك أن تتجه إليه لتكوين التطبيق، وستجد به خيارات كثيرة، مثل نسق الألوان الذي يستخدمه الأوفيس Office والتدقيق الإملائي ولغات التحرير ومواقع الملفات الافتراضية وغيرها من الخيارات. الرجوع إلى قاعدة البيانات إذا أردت الخروج من طريقة عرض "خلف الكواليس Backstage" والرجوع إلى قاعدة البيانات التي كنت تعمل عليها، فانقر فوق سهم "عودة" في الجزء العلوي الأيمن من جزء التنقل، أو اضغط فقط على مفتاح "الهروب Escape" على لوحة المفاتيح. نظرة عامة على واجهة المستخدم عند فتح ملف قاعدة البيانات، سواءٌ كان القالب فارغًا أو فتحت أحد القوالب المعدة مسبقًا؛ سوف تظهر لك الصورة التالية: وفيما يلي تفصيلها: شريط أدوات الوصول السريع: يقع شريط أدوات الوصول السريع في الزاوية العلوية اليمنى للإطار، كما يحتوي على مهام مشتركة ومُخصصة لتشتمل على معظم الأوامر التي تريدها، وسوف نستعرض شريط أدوات الوصول السريع في الدرس التالي من هذا الدليل. التبويبات: يستخدم برنامج أكسس التبويبات، إذ تحتوي على مجموعات من الأوامر الخاصة بكل تبويب، وذلك بالاعتماد على الكائن المُستخدم حاليًا، وسوف نستعرض بعضها في الدرس التالي من هذا الدليل. شريط الأوامر: تظهر الأوامر المُرتبطة بكل تبويبة في هذا الجانب، وبعض تلك الأوامر مُظللة باللون الرمادي؛ مما يعني أنها غير مناسبة للتطبيق في الوقت الحالي، ولكي تُستخدم تحتاج إلى اختيار المعلومات أو العمل مع الكائن الذي يمكن أن يستخدم تلك الأوامر. شريط الرسائل: يعمل شريط الرسائل على التنبيه حول عناصر قد تكون غير آمنة في ملف قاعدة البيانات التي تستخدمها، وغالبًا ما يكون التحذير لأمر ثانوي، مثل فتح ملف من موقع غير موثوق به، ولا يعني هذا أن برنامج أكسس كثير التحذيرات، لكن بدلًا من ذلك يضمن تنبيهك حول التهديدات المحتملة لأمان الملف، وعادةً ما يحتوي شريط الرسائل على زر أو أمر يمكنك من التحقق من التحذير، وهنالك أيضًا زر إغلاق (X) موجود في الجانب الأيسر للشاشة الذي يخفي شريط الرسائل عند الانتهاء من التعامل مع التحذير. جزء التنقل: يُستخدم جزء التنقل لعرض الكائنات المختلفة في قاعدة البيانات والبحث عنها والعمل معها، ومن هذه الكائنات الجداول والنماذج والتقارير والاستعلامات، وقد يكون جزء التنقل مخفيًّا بالضبط كما في الصورة التوضيحية التالية، ولعرض هذا الجزء ومحتوياته؛ انقر على زر فتح/ إغلاق شريط المصراع ( >> ). وإليك بعض الكائنات الموجودة في قالب قاعدة البيانات الذي نعمل عليه، إذ يوجد بها جدولان واستعلامان وستة نماذج وثمانية تقارير، وذلك على النحو التالي: مساحة العمل: تتفاعل مساحة العمل في هذا المكان مع الكائنات المختلفة لقاعدة البيانات، لذا يمكنك فتح وعرض الجداول لتغيير البيانات وتصميم النماذج والتقارير وبناء الاستعلامات وأكثر من ذلك، ويظهر كل كائن مفتوح في مساحة العمل عبر تبويبة العنوان، فيمكنك مثلًا -في قالب قاعدة البيانات- فتح نموذج وتقرير باستخدام جزء التنقل، وفي حال فتح الكائنات يمكنك التنقل بين تلك الكائنات عن طريق النقر على تبويبة الكائن، كما يمكن إغلاق الكائنات الفردية بالضغط على زر (X) على يسار تبويبات الكائنات المفتوحة. شريط المعلومات: يمتد شريط المعلومات على طول الجزء السفلي للشاشة، إذ تُقدَّم إحصاءات حَيوِية عن قاعدة البيانات والكائن الحالي وحالة الاستعلام الكبير بالتفصيل وغير ذلك. عرض الأوامر: توجد أوامر -في أقصى الزاوية اليسرى لشريط المعلومات- تُستخدم للتبديل ما بين طرق العروض المتوفرة المختلفة لكل كائن في قاعدة البيانات، إذ تتفاوت تلك العروض من كائن لآخر، وتشتمل العروض على عرض الكائن بالكامل وعرض التصميم الداخلي للكائن وغير ذلك. استخدام علامات التبويب القياسية يستخدم برنامج أكسس التبويبات بدلًا من القوائم والقوائم الفرعية التقليدية، إذ تظهر ميزات برنامج أكسس من خلال ست تبويبات عند فتح برنامج أكسس، وهي: ملف. الصفحة الرئيسية. إنشاء. بيانات خارجية. أدوات قاعدة البيانات. مساعدة. وتحتوي كل تبويبة على أوامر منظمة في مجموعات، كما يمكنك ملاحظة المجموعات التالية في تبويبة "الصفحة الرئيسية"، وهي: طرق العرض. الحافظة. فرز وتصفية. سجلات. بحث. تنسيق النص. تحتوي كل مجموعة على أمر أو عدة أوامر، وظُللت بعض الأوامر باللون الرمادي للدلالة على أنها غير متاحة للاستخدام في الوقت الحالي، لكن قد تكون متاحةً للاستخدام في وقت العمل مع كائن يمكنه استخدام تلك الأوامر. وتُظهر العديد من الأوامر وصفًا موجزًا حال تمرير مؤشر الفأرة فوقها، ويُدعى ذلك الوصف "تلميح الشاشة"، لذا إن وقفت مثلًا على أيقونة الجدول الموجود في مجموعة الجداول في التبويبة "إنشاء"، فستُظهر تلميح الشاشة التالية: وتحتوي بعض المجموعات -مثل مجموعة "الحافظة" في التبويبة "الصفحة الرئيسية"- على زر خيار في الزاوية السفلى اليسرى، لذا انقر على زر خيار لفتح مربع حوار أو عنصر النافذة التي توفر المزيد من الوظائف أكثر من المقدمة في الشريط، إذ يفتح زر الخيار الخاص جزء المهام في الحافظة، والتي تُتيح العمل مع القص والكائنات المنسوخة، وسوف تتعلم المزيد عن القص والكائنات المنسوخة في الدرس القادم. استخدام التبويبات السياقية قد تلاحظ ظهور بعض التبويبات واختفائها عند العمل مع كائنات مختلفة في برنامج أكسس، وتُسمى هذه التبويبات "تبويبات سياقية"، إذ لا تظهر إلا عند العمل في إطار كائن محدد، لذا إن فتحت مثلًا قاعدة بيانات فارغةً، فسترى ظهور جدول جديد في جزء التنقل ومساحة العمل، ويظهر هذا الجدول في عرض ورقة البيانات التي تمكنك من تعديل البيانات مباشرةً في الجدول، كما يمكنك أن ترى ظهور تبويبين سياقيين تتعامل بالتحديد مع الجداول ومحتوياتها. إذا كنت بصدد إنشاء بعض الكائنات الأخرى مثل "نموذج" أو "تقرير"، فسوف تختفي التبويبات السياقية لأدوات الجدول حال توقفك عن العمل بالجدول، وقد تظهر غيرها من التبويبات السياقية. إلى هنا نكون قد وصلنا إلى نهاية هذا الدرس، وسوف نتعرف في الدرس القادم بالتفصيل على واجهة المستخدم، لذا نتمنى أن نكون قد أضفنا لك معلومةً جديدةً ومفيدةً، ولا تتردد في ذكر أي استفسارات في التعليقات، فسوف نرد عليها في أقرب وقت. اقرأ أيضًا شرح واجهة برنامج قواعد بيانات مايكروسوفت أكسس Microsoft Access1 نقطة
-
1 نقطة
-
أيهما افضل تعلم لارافيل او asp.net لبناء متجر الكتروني متكامل علما ان لدي معرفة متوسطة بال asp.net من ناحية فرص العمل أيهما افضل؟ نشر المشروع و تشغيله اضافات مكتبات مجانية مساعدة ربط مع وسائل الدفع1 نقطة
-
السلام عليكم و رحمة الله و بركاته لماذا يظهر لي هذا الخطأ عند رفع المشروع على هيروكو ؟ at=error code=H20 desc="App boot timeout" method=GET path="/" host=api-kachafe.herokuapp.com request_id=b712c667-5ca1-4a85-bf57-f216bd73beef fwd="37.209.254.16" dyno= connect= service= status=503 bytes= protocol=https الكود في الصورة1 نقطة
-
لايمكنك التخلي عن الميديا كويري حتى مع استخدام بوتستراب ستحتاج أحياناً لاستخدامها من اجل القيام بتصاميم معينة. فينبغي تعلم كل منهما بشكل جيد واستخدامهما معاً.1 نقطة
-
1 نقطة
-
يمكنك عمل شريط شبيه بهذا باستخدام الـ after والـ before واستخدام الـ border انظر للكود المرفق : <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <link rel="stylesheet" href="style.css"> <title>Document</title> </head> <body> <ul id="header-lest"> <li class="test"> home </li> <li class="test"> profile </li> <li class="test"> notifications </li> <li class="test"> messages </li> </ul> </body> </html> عبارة عن شريط ul عادية تحتوي على li واعطيناها الid المسمى header-lest وكذلك اعطينا كل من الـ li الكلاس lest-item. واعطيناهم الخصائص التالية : /* هذه الاعدادات ضرورية من اجل بدئ كل مشروع */ * { padding: 0; margin: 0; box-sizing: border-box; } /* نقوم بإضافة الخصائص للقائمة */ #header-lest { list-style: none; display: flex; justify-content: space-evenly; flex-wrap: wrap; position: relative; margin: 20px 20px 0; margin-top: 10px; height: 24px; font-size: large; } /* نضيف هذه الخصائص من اجل اضافة حواف زرقاء */ #header-lest::after { content: ""; position: absolute; width: 100%; height: 100%; border: 3px solid rgb(0, 179, 255); border-radius: 7px; } #header-lest::before { content: ""; position: absolute; width: 100%; height: 100%; border: 3px solid rgb(0, 179, 255); } /* **************************************************************************** */ /* *********** اعداد الازرار والحواجز المائلة********************************* */ /* **************************************************************************** */ .lest-item { min-width: 150px; height: 30px; line-height: 30px; position: relative; } /* هنا نقوم بإنشاء مثلث باستخدام البوردر */ .lest-item::before { content: ""; position: absolute; right: 0; border-left: 50px solid red; border-bottom: 30px solid transparent; } /* هنا نقوم بإنشاء مثلث آخر ابيض ونضعه امام المثلث الحمر ونغيير موضعه قليلاً بحيث يظهر خط احمر فقط */ .lest-item::after { content: ""; position: absolute; right: 5px; border-left: 50px solid #fff; border-bottom: 30px solid transparent; } /* *************************************************************** */ /* *********** حذف الحاجز الاخير ********************************* */ /* *************************************************************** */ .lest-item:last-of-type { min-width: 75px; } .lest-item:last-of-type::before { display: none; } .lest-item:last-of-type::after { display: none; } /* ************************************************************************** */ /* *********** تغيير الوان الحواجز المائلة********************************* */ /* ************************************************************************** */ .lest-item:nth-of-type(1)::before { border-left-color: rgb(255, 132, 0); } .lest-item:nth-of-type(2)::before { border-left-color: red; } .lest-item:nth-of-type(3)::before { border-left-color: yellow; } النتيجة النهائية : الفكرة الاساسية هنا هي استخدام الخصائص التالية لإنشاء مثلث : border-left: 50px solid red; border-bottom: 30px solid transparent; وللتعلم اكثر حول صناعة الاشكال يمكننا عمل الشكل التالي باستخدام css و الـ borders : الكود المستخدم : <div></div> <style> div { width: 0; margin: 50px auto 50px; border-right: 20px solid red; border-left: 20px solid blue; border-top: 20px solid green; border-bottom: 20px solid yellow; } </style>1 نقطة