Admin الاداره العامه
عدد المساهمات : 225 تاريخ التسجيل : 11/07/2015
| موضوع: احتراف التكويد - تكويد ايقونات التوآصل الاجتماعي الأحد يوليو 19, 2015 12:23 am | |
| الدرس : - اقتباس :
اول شيء نفتح ملف العمل القديم نروح لدف النافبار <div class="nav"></div> نعمل ul بدآخلو ونعمل كلاس نسميه social رح يصبح كدا <div class="nav"> <ul class="social"></ul> </div> بدآخل ul نضيف li اخرى نعمله كلاس اسموآ facebook كده <div class="nav"> <ul class="social"> <li class="facebook"></li> </ul> </div> نضيف بدآخل li بتاع الفيسبوك a اخرى و نعملو href ونعمله الرابط الي يوجه اليه رح يصبح الشكل كده <div class="nav"> <ul class="social"> <li class="facebook"><a href="#"></a></li> </ul> </div> بجآنب href نعمل tiptitle ونعمله الوصف يعني لو يمر الماوس على الايقونة بيظهرلك الوصف الي كتبتله ورح يصبح كده <div class="nav"> <ul class="social"> <li class="facebook"><a href="#" tiptitle="تابعنا على الفيسبوك"></a></li> </ul> </div> كده انتهينا من الفيس بوك الحين نعمل للتويتر نفس العمل بس نغير اسم كلاس الفيسبوك يعني كده <div class="nav"> <ul class="social"> <li class="facebook"><a href="#" tiptitle="تابعنا على الفيسبوك"></a></li> <li class="twiter"><a href="#" tiptitle="تابعنا على تويتر"></a></li> </ul> </div> بس يكون التويتر ايضا بداخل كلاس سوسيال الحين نريح هنا <style type="text/css"></style> ونعمل بدآخل .social { } ونعملو الامر ;background-repeat:no-repeat يعني عآدي ونعمله الامر ;list-style:none ثم نعمله الاتجاه ;:float لو تبيه يمين تعمله ;float:right ولو تبيه يسار ;float:left ونعمله ;:width في ده الامر نعمل مجموع عرض كامل الايقونات مثلا انا عندي 4 ايقونات ولدي عرض ايقونة واحدة 10 بعمي 40 10+10+10+10 عشان ابسط عليكم ونعمل ;:height طبعا الطول يكون طول وآحد ما نتحاج نعمل مجموع الحين نعمل .social li { } نعمل فيه ;display:inline يعني في سطر وآحد نعمل الاتجاه مرة اخرى يعني float و ;background-repeat:no-repeat الحين نعمل .social li a { }
نعمل فيها ;display:block و ;:width يعني عرض ايقونة واحدة بس و ;:height الطول ونعمل ;position: relative عشان يشتغل التوجيه ونعمل ;float: right ده لازم تعملو ضروري عشان مايكون هابط تحت ثم ;text-decoration:none و ;:font-size يعني حجم الخط كده احسن ;font-size:5px الحين اخر خطوة نعمل .facebook { }
ونعمل background-image ونعمل صورة ايقونة الفيسبوك ونفس الشيء بالنسبة للتويتر كده نكون انتهينآ ملآحظة: يجب في نهآية كل امر وضع رمز {;} كما في الدرس | |
|
الزعيم الاداره العامه
عدد المساهمات : 83 تاريخ التسجيل : 13/07/2015
| موضوع: رد: احتراف التكويد - تكويد ايقونات التوآصل الاجتماعي الأحد يوليو 19, 2015 1:07 am | |
| شرح جميل ومفيد جزائك الله كل خيرا اخى | |
|