ان كنت استفدت من محتوى المنتدى فاضغط على الاعلانات..

الدرس الثاني : جزء 2 (عمل ازرار للهيدر وتوجيهه لصور)

  افضل مساهمة1
الدرس الثاني : جزء 2 (عمل ازرار للهيدر وتوجيهه لصور)
الدرس الثاني : التعرف الكلاس واكواد css وطريقة عملها ووضعها (جزء2)
السلام عليكم ورحمة الله وبركاته
اسعد الله اوقاتكم بكل خير
نقدم لكم الدورة الحصرية من اعداد اختكم JAR7
دورة احتراف تكويد استايلات التومبلايت لاحلى منتدى


.
هتتكون الدورة بعون الله مجموعه دروس
1- الدرس الاول : تهيئة قوالب التومبلايت للعمل عليها
2- الدرس الثاني : التعرف الكلاس واكواد css وطريقة عملها ووضعها
3- الدرس الثالث : تقطيع الاستايل المصمم عن طريق الفوتوشوب وكيفية حفظة
4- الدرس الرابع : عمل كلاسات للاستايل الذي تم تقطيعه بالقوالب التي
سيتم العمل بها :/
5- الدرس الخامس : عمل ورقة css للكلاسات لكي تعمل بالمنتدى
6- الدرس السادس : وهو الاخير اخراج العمل والانتهاء من الاستايل


الدرس يوتيوب مدة 28 دقيقة حاولت الاسراع واول مرة لم اعد الدرس الحمد لله ههههههه
تعرفنا على هذا الدرس عمل نافبار او عمل هيدر به ازرار او ايقونات تواصل اجتماعي
فوائد الدرس :
طريقة عمل كلاسات صحيحة للتصميم
طريقة التقطيع الصحيحة
طريقة عمل كلاس الازرار سواء بصورة او بعمل خلفية
تعرفنا على اوامر جديدة باكواد css
امر التمدد padding
امر الانزياح margin
امر تباعد الاسطر line-heigh
امر حجم الخط font-size
امر توسيط الخط text-align
امر عمل حواف دائرية border-radius

الفكرة لعمل ازرار لايقونات معينه مثل ايقونات التواصل الاجتماعي
هو ايجاد موقعها وايطار الموقع حتى عند مرور الماوس يكون الصورة بالهدف الطلوب

الدرس اليوتيوب مشاهدة :/

https://youtu.be/j1hzrMNx5tY

الكلاسات التي تم عملها بالدرس
الكود:


<div class="nnb">
<div class="nnr">
<a href="#" title="الرئيسية">الرئيسية</a>
<a href="#" title="التسجيل">التسجيل</a>

<a href="#" title="اتصل بنا">اتصل بنا</a>

</div>
<div class="nnl">
<a href="#" title="تابعنا بتويتر"></a>
<a href="#" title="تابعنا على قوقل بلس"></a>

<a href="#" title="تابعنا rss"></a>

<a href="#" title="تابعنا فيس بوك"></a>

</div>

</div>

اكواد css

الكود:

.nnb{
   background-image:url('https://i37.servimg.com/u/f37/16/46/77/76/uo-ouo14.gif');
   background-repeat:repeat;
   height:90px;
}
.nnl{
   background-image:url('https://i37.servimg.com/u/f37/16/46/77/76/uo-ouo13.gif');
   background-repeat:no-repeat;
   float:left;
   height:90px;
   width:223px;
}
.nnl a {
    float: left;
    height: 80px;
    margin-left: 3px;
    padding: 1px;
    width: 50px;
}
.nnr{
   float:right;
}
.nnr a {
    background: #fff none repeat scroll 0 0;
    border-radius: 5px;
    color: #000;
    float: right;
    font-size: 18px;
    height: 50px;
    line-height: 50px;
    margin: 10px;
    padding: 5px;
    text-align: center;
    width: 100px;
}


وختاما احلى سلام :/
اختكم JAR7


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