احتراف التكويد - تكويد ايقونات التوآصل الاجتماعي

الدرس :

اقتباس :: اول شيء نفتح ملف العمل القديم
نروح لدف النافبار
<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
ونعمل صورة ايقونة الفيسبوك
ونفس الشيء بالنسبة للتويتر
كده نكون انتهينآ

ملآحظة: يجب في نهآية كل امر وضع رمز {;} كما في الدرس

شرح جميل ومفيد

جزائك الله كل خيرا اخى

» احتراف التكويد - تكويد الهيدر باللوجو
» احتراف التكويد - تكويد النافبار بالازرار
» احتراف التكويد - تقطيع استايل تومبيلات كآمل
» طلب تكويد هذا الاستايل فضلا
» [icon] ايقونات للمصممين و المبدعين