منتديات تقنيات
يسعدنا تسجيلكم بالمنتدى اهلا بكم


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

استعرض الموضوع السابق استعرض الموضوع التالي اذهب الى الأسفل

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

مُساهمة من طرف JAR7 في 27/11/16, 05:26 am

الدرس الثاني : جزء 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



JAR7
مؤسس المنتدى


الجنس : انثى
عدد المساهمات : 2195
التقييم : 285
تاريخ التسجيل : 05/01/2016
اوسمتي : :10:10:10

معاينة صفحة البيانات الشخصي للعضو http://www.t3qnyiat.com

الرجوع الى أعلى الصفحة اذهب الى الأسفل

استعرض الموضوع السابق استعرض الموضوع التالي الرجوع الى أعلى الصفحة

إنشاء حساب أو تسجيل الدخول لتستطيع الرد

تحتاج إلى أن يكون عضوا لتستطيع الرد.

انشئ حساب

يمكنك الانضمام لمنتديات تقنيات فعملية التسجيل سهله !


انشاء حساب جديد

تسجيل الدخول

اذا كنت مسجل معنا فيمكنك الدخول بالضغط هنا


تسجيل الدخول

 
صلاحيات هذا المنتدى:
لاتستطيع الرد على المواضيع في هذا المنتدى