ثريد | كيف تنشئ header لصفحتك باستخدام html و css .
يعتبر الـheader أحد أهم العناصر في صفحة الويب لدورها الفعال في تنظيم المحتوى للمستخدم و تسهيل الوصول لأبرز المحتويات ، فهيا بنا لنتعرف عن كيفية إنشاء header خاص بصفحتنا .
📌 الثريد كمقالة واحدة في مدونتنا 👇
🔗 prog4all.ita27.com
📌 الثريد كمقالة واحدة في مدونتنا 👇
🔗 prog4all.ita27.com
1⃣ إعداد صفحة الـhtml :
بعد بإنشاء ملف اسمه index.html للصفحة و ملف آخر باسم style.css لكتابة كود الـcss فيه ، قم بإضافة هذا الكود في ملف index.html .
بعد بإنشاء ملف اسمه index.html للصفحة و ملف آخر باسم style.css لكتابة كود الـcss فيه ، قم بإضافة هذا الكود في ملف index.html .
2⃣ تعديلات عامة على تصميم الصفحة :
في هذه الخطوة ، قمنا بعمل بعض التعديلات على الصفحة أي العنصر body مع وضع الخصائص المشتركة لكل عنصر في الصفحة .
في هذه الخطوة ، قمنا بعمل بعض التعديلات على الصفحة أي العنصر body مع وضع الخصائص المشتركة لكل عنصر في الصفحة .
3⃣ التعديل على عنصر الوسم header و ul :
في هذه الخطوة ، قمنا بإضافة بعض الأشياء المهمة في رأس الوسوم الأساسية للـheader الخاص بنا من لون و أبعاد و طريقة العرض و تعتبر هذه الخطوة هي أهم خطوة لإنشاء ما نريده .
في هذه الخطوة ، قمنا بإضافة بعض الأشياء المهمة في رأس الوسوم الأساسية للـheader الخاص بنا من لون و أبعاد و طريقة العرض و تعتبر هذه الخطوة هي أهم خطوة لإنشاء ما نريده .
4⃣ التعديل على عناصر القائمة :
كما ترون في الصورة التي أمامكم ، قمنا ببعض التعديلات المهمة المهمة جدا لعرض كل عنصر من القائمة و كيفية التحكم في شكل النص عند تمرير الماوس فوقها .
كما ترون في الصورة التي أمامكم ، قمنا ببعض التعديلات المهمة المهمة جدا لعرض كل عنصر من القائمة و كيفية التحكم في شكل النص عند تمرير الماوس فوقها .
📌 النتيجة النهائية :
بعد جمع جميع الأكواد السابقة في ملف style.css و تشغيل صفحة index.hml من المتصفح نتحصل على النتيجة التالية :
بعد جمع جميع الأكواد السابقة في ملف style.css و تشغيل صفحة index.hml من المتصفح نتحصل على النتيجة التالية :
📌 بعض الملاحظات المهمة :
يمكنك التغيير في الألوان و الخط و غير ذلك كما تشاء .
الـheader متجاوب مع جميع الأجهزة .
يمكنك إضافة بعض التعديلات على مكان عرض الـheader ( أسفل ، فوق ، بالجانب ) و الـposition الخاصة به فقط باستخدام بعض الأوامر البسيطة.
تابع @Brmajyat 😁 .
يمكنك التغيير في الألوان و الخط و غير ذلك كما تشاء .
الـheader متجاوب مع جميع الأجهزة .
يمكنك إضافة بعض التعديلات على مكان عرض الـheader ( أسفل ، فوق ، بالجانب ) و الـposition الخاصة به فقط باستخدام بعض الأوامر البسيطة.
تابع @Brmajyat 😁 .
في الختام ، أرجو أن يساعدكم هذا المقال في تعلم طريقة إنشاء header خاص بصفحاتكم 🌹 .
Loading suggestions...