درس تكويد . وضع روابط نصية بالهيدر

  افضل المواضيع1
درس تكويد . وضع روابط نصية بالهيدر

السلام عليكم ورحمة الله وبركاته

نكمل درسنا تكويد هيدر لنضيف روابط نصية بالنافبار العلوي

 درس عمل هيدر باللوغو بتقنية css مثل منتدانا الحبيب  

كود النافبار هو

الكود:
.navb {
background-color: #034671;
background-repeat: repeat; 
height: 50px;
}

نضيف تحته كود css لروابط النصية وسوف يحتوي على

اتجاة موقع الروابط النصية
float: right;
لون الروابط النصية
color: #AAAAAA;
حجم خط النص
font-size: 14px;
وضع امر تباعد الروابط
padding: 5;
وضع امر توسيط الروابط في وسط النافبار
margin: 5;

ويكون تسميته كالاتي

الكود:
.navb a{
float: right;
color: #AAAAAA;
font-size: 14px;
padding: 5;
margin: 5;
}



حيث حرف a  يرمز لكلاس الكتابة الذي سيضاف بكلاس النافبار
الذي تم وضعه سابقا بالدرس

ويكون كالاتي

الكود:
<a></a>

نضيف خاصية تلميح الرابط عند مرور الماوس علية
الكود:
<a title="طلبات التصميم"></a>
نضيف خاصية الرابط الموجةة ﻻسم الروابط النصية
الكود:
<a href="http://taqnyiat.ahlamontada.com/f3-montada" title="طلبات التصميم"></a>
نضيف هنا اسم الرابط
الكود:
<a href="http://taqnyiat.ahlamontada.com/f3-montada" title="طلبات التصميم">طلبات التصميم</a>
ليكون كالاتي

الكود:
<div class="navb">
<a href="http://taqnyiat.ahlamontada.com/f3-montada" title="طلبات التصميم">طلبات التصميم</a>
</div>

ونكرر نفس الكلاس دة على حسب عدد الروابط النصية المطلوب



انتهى الدرس دمتم بخير


m13
  افضل المواضيع2
شرح نايس جرح
يسلموووو
  افضل المواضيع3
شكرآ جزيلا على الموضوع الرائع و المميز 
واصل تالقك معنا في المنتدى 
بارك الله فيك اخي ... 
ننتظر منك الكثير من خلال ابداعاتك المميزة 
لك منـــــــ اجمل تحية ــــــــــي
  افضل المواضيع4
الابداع عنوانك اختي جرح
انا متابع لااعمالك الرائعه واستخدم كل ابداعك من الاستايلات والاكواد
لاانها تكويد صحيح ..
بورك نبضك المتالق

  افضل المواضيع5
اهلا اخي العزيز
بوركت على كلماتك الرائع
دمت بخير


m13
  افضل المواضيع6
يعطيكم الف عافيه


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