المواضيع الأخيرة
أفضل 10 أعضاء في هذا الأسبوع

المتواجدون الآن ؟
ككل هناك 9 عُضو متصل حالياً :: 0 عضو مُسجل, 0 عُضو مُختفي و 9 زائر :: 2 عناكب الفهرسة في محركات البحث

لا أحد

[ مُعاينة اللائحة بأكملها ]


أكبر عدد للأعضاء المتواجدين في هذا المنتدى في نفس الوقت كان 141 بتاريخ 19/07/16, 08:08 am
احصائيات
هذا المنتدى يتوفر على 559 عُضو.
آخر عُضو مُسجل هو أبو صابر فمرحباً به.

أعضاؤنا قدموا 10105 مساهمة في هذا المنتدى في 1977 موضوع

لونك المفضل

اعلان هــــــام

استايل منتدى تقنيات الحالى للبيع لمزيد من التفاصيل مراسلة الأخ omarpop23


منتديات تقنيات :: دورات ودروس منتديات تقنيات :: 

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

avatar
الدرس الثاني : جزء 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
avatar
شكرا على المجهود الرائع
و المشاركة المميزة
بارك الله فيكم
و فى انتظار جديدكم
avatar
السلام عليكم ورحمة الله وبركاته
ألف شكر لكَ على هذا الموضوع المميز و المعلومات القيمة
إنـجاز أكثر رائــــــع
لكن أرجو منكَ عدم التوقف عند هذا الحد
مـنتظرين ابداعتــــــك
دمتـ ودام تألقـك
تحياتــي

سجل دخولك أو انشئ حساب لترك رد

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

انشئ حساب

الانضمام إلى مجتمعنا من خلال إنشاء حساب جديد. من السهل


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

تسجل دخول

هل لديك حساب بالفعل؟ لا توجد مشكلة، قم بتسجيل الدخول هنا.


تسجيل دخول