درس عمل هيدر باللوغو بتقنية css مثل منتدانا الحبيب

  افضل المواضيع1
درس عمل هيدر باللوغو بتقنية css مثل منتدانا الحبيب

السﻻم عليكم ورحمة الله وبركاته

نكمل سلسله دروسنا بعمل درس هيدر باللوغو كما هو متواجد بمنتدانا تقنيات

من خلال الهيدر نلاحظ امور

اوﻻ خلفية موحد مكرر على طول الهيدر
ثانيا لوغو على اليمين وهو يوجد شعار واسم المنتدى
ثالثا نافبار بلون ازرق علوي
رابعا ظل للهيدر بلون رمادي اسفله

.........

كما وضحنا بدرسنا الاول كيف نعمل الاكواد الان تطبيق للامور مباشرتا

نفتح قالب overall_header

نضيف اعلى وسم </head>

الكود الاتي الحاوي ﻻكواد css
الكود:

<style>
هنا الاكواد تضاف
</style>

ونبدا بأوامر css للهيدر  

اوﻻ نبدا باضافة كود البودي لنعمل له تمدد للهيدر يمين ويسار واعلى
لكي ﻻ يكون هناك فراغ بالهيدر بهذة الاتجاهات

الكود:

body{ margin: 0; }

خلصنا من هالامر نبدا بكود النافبار العلوي

حيث يحوي امر ارتفاع النافبار وامر تمدد وامر لون النافبار

لون النافبار
background-color: #034671;

امر التمدد بعرض المنتدى
background-repeat: repeat;

امر ارتفاع
height: 50px;

وتسمية بيكون مثلا navb

اذا الكود كامل css

الكود:
.navb {

background-color: #034671;

background-repeat: repeat;


height: 50px;

}

الان نكمل خصائص css للهيدر

خلفية للهيدر مع ظل للاسفل بلون مخالف

نضع امر الخلفية
background-color: #FAFAFA;
امر المدد بعرض منتدى

background-repeat: repeat;

امر الارتفاع

height: 120px;

امر الظل
border-top: 2px solid #C80202;
ونسمية الهيدر الخلفية مثلا hhb

والكود css لخلفية الهيدر هتكون كالاتي

الكود:
.hhb {
background-color: #FAFAFA;

background-repeat: repeat;

height: 120px;
border-top: 2px solid #C80202;
}

الان اللوغو وهو دة

https://i.servimg.com/u/f84/16/46/77/76/111010.png

ويتكون كود css بتاعه من

صورة اللوغو
background: url("https://i.servimg.com/u/f84/16/46/77/76/111010.png")
امر عدم تكرار الصورة
background-repeat: no-repeat;
امر الاتجاة باليمين او اليسار
float: right;
امر الارتفاع  الصورة
height: 67px;
امر العرض الصورة
width: 250px;
امر تحريك موقع الصورة ﻻسفل
margin-top: 30px;
امر تحريك موقع الصورة لليسار

margin-right: 20px;

ونعطي له تسمية logoo

اذا هيكون كود css هكذا

الكود:
.logoo {
background: url("http://i84.servimg.com/u/f84/16/46/77/76/111010.png")؛
background-repeat: no-repeat;
float: right;
height: 67px;
width: 250px;
margin-top: 30px;
margin-right: 20px;
}

..........

انتهينا من اوامر css واكودها ونظيفها كما ذكرنا فوق موقعها

الان نبحث عن  بقالب الهيدر
{JAVASCRIPT}

ونضيف اسفلها كلاسات لعمل اكواد css بالمنتدى الطريقة دةة للنسخة الثانية تابعووو

الكلاس الاول النافبار
<div class="navb"></div>
الكلاس الثاني الهيدر
<div class="hhb">

<div class="logoo"></div>

</div>
حيث الخلفية تكون بالبداية ونضع كلاس اللوغو قبل قفل كلاس الخلفية هكذا

ونسجل وانتهينا من الدرس

سوف يكون درسنا القادم وضع ازرار بالنافبار بمشيئة الله


m13
  افضل المواضيع2
رائع بارك الله فيكي
  افضل المواضيع3
تَحية تلطفهآ قلوب طيبة ونقٌية
آ‘لتميزٍ لآ يقفٌ عندْ أولْ خطوٍة إبدآعٌ
بلْ يتعدآه في إستمرآرٍ آلعَطآءْ
ووآصلي فيٌ وضعٌ بصمـتكـ بكل
حرٍفٌ تزخرفيه لنآ‘
مِنْ هنآ أقدمٌ لكـ بآقـة وردْ ومحبـة
وٍنحن دوٍمآ نترٍقبٌ آلمَزٍيدْ بفارغ الصبر
مواضيعكِ الراقية



وهبة الساحر
القلوب المكسورة كالزجاج المكسور خطرة و مؤذية لا تحتاج للحب بقدر ما تحتاج للوحدة حتى يتم شفاؤها . . !!
     

  افضل المواضيع4
منورين جميعا .. ♥


m13
  افضل المواضيع5
كنت اريد متابعة الدورة وحسبتها بفيديو اوضح ولكن طلعت كتابة للاسف

عمومأ درس رائع بالتوفيق ان شاء الله
  افضل المواضيع6
كتابة للاسف !!!
بالعكس الكتابة افضل من شرح فيديو بدون صوت
بكل الاحوال من اراد التعلم ﻻ يهمة الطريقة بل يهمة ان يتعلم ويطور نفسه
منور


m13
  افضل المواضيع7
طيب حجرب
  افضل المواضيع8
شكرآ جزيلا على الموضوع الرائع و المميز 
واصل تالقك معنا في المنتدى 
بارك الله فيك اخي ... 
ننتظر منك الكثير من خلال ابداعاتك المميزة 
لك منـــــــ اجمل تحية ــــــــــي
  افضل المواضيع9
شكرا ع الطرح المميز

عاشت الايادي

••

مع أجمل ودْ مني
  افضل المواضيع10
منورين حبايبي


m13
  افضل المواضيع11
السلام عليكم ورحمة الله وبركاته
ألف شكر لكَ على هذا الموضوع المميز و المعلومات القيمة
إنـجاز أكثر رائــــــع
لكن أرجو منكَ عدم التوقف عند هذا الحد
مـنتظرين ابداعتــــــك
دمتـ ودام تألقـك
تحياتــي
لاتستطيع الرد على المواضيع في هذا المنتدى