Murls Murls
 
»أوراق الانماط Css»
   كيفية انشاء ال tab والتحكم بها او مايسمى بالجدولة html+css

بسم الله الرحمن الرحيم
في مقالتنا اليوم ساتكلم عن كيفية تصميم وتنفيذ المجدولة اي مايرمز لها tab
للبدء نقوم باضافة طبقة وهي الحاوي div
كودها

 

 

 <div>

</div> 


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

 



 <div>

 <!-- الاول  -->

 <div style="height: 19px">

 </div>

 <!-- الثاني -->

     <div style="background-color: orange; height: 48px;">

    </div>

</div> 

الطبقة الاولى في الحاوية وهيا طبقة لاحتواء الروابط او tab

والطبقة الثانية تجميلية من اجل تنسيق العلامات الجدولة tab

الان نقوم باضافة روابط الى الحاوية الاولى

وهي وسوم <a>

[php]

  <a href="A">A</a><a href="B">B</a><a href="C">C</a><a href="D">D</a> 

  


بعد اضافتها الى الحاوية اصبحت جاهز للتنسيق
نقوم بالذهاب الى وسم الصفحة
ونقوم بالتنسيق عن طريق اوارق الانماط الانسيابيةcss
ساضع الكود واقوم بشرحه

 

<style type="text/css">

A{

    display:block;

    width:100px;

    float:left;

     background-color:red;

     

}

a:active{

    background-color:orange;

}

</style> 




في هذا السطر اعلنا للمستعرض على اننا سنبدا بالتنسيق عن طريق css


 

<style type="text/css"> 

ثم اضفنا سطر جديد وفيه



[php]

A{

    display:block;

    width:100px;

    float:left;

     background-color:red;

     

} 


في السطر الاول اخبرنا المستعرض على اننا سنقوم بالتحكم بالوسم a
والي هو وسم الروابط
ثم قمنا في السطر التالي

 

    display:block; 

جعلنا قيمة العرض موجودة لهذه الخاصية display فوائد كثيرة

طبعا هنا حدنا انها يجب ان تعرض

ثم في السطر التالي



[php]

    width:100px; 


تحكمنا في عرض الوسم a
و في السطر التالي

 

    float:left; 


قمنا بمحاذاة الراوبط الى جانب بعضها باتجاه اليسار ولو انا لم نظيف هذه الخاصية لاصبحت الروابط تتوضع اسفل بعضها يمكنك التجريب
ثم في السطر الحالي

 

     background-color:red;


قمنا بتغيير لون الخلفية بما يناسينا
وهو اللون الاحمر
ثم اغلاقنا القوس وبدئنا في


 

     a:active{ 


هنا اخبرنا المستعرض اننا سنتحكم بالرابط النشط اي رابط الصفحة التي تكون نشطة
حاليا
وقمنا فقط بتغير لونه الخفلية كما ذكرنا سابقا
ثم اغلقنا القوس واقلنا وسم التسيق عن طريق

 

    </style> 


طبعا يمكنك التحكم بالتنسيق اثناء المرور عن طريق
a:hover
ولكن اتركه لك حتى لايطول الشرح
مثال الكود كامل


 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">



<head>

<meta http-equiv="Content-Language" content="en-us" />

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<title>ABCD</title>

<style type="text/css">

A{

    display:block;

    width:100px;

    float:left;

     background-color:red;

     

}

a:active{

    background-color:orange;

}

</style>

</head>



<body>



<div>

    <div style="height: 19px"><a href="A">A</a><a href="B">B</a><a href="C">C</a><a href="D">D</a></div>

    <div style="background-color: orange; height: 48px;">

    </div>

</div>



</body>



</html> 


للتصفح اضغط على الرابط ثم ارجع بزر الخلف رح تجد تغير اللون
لاني لم ادرج عدة صفحات
هذا واتمنى من الله العلي القدير قد اكون بسطة الفكرة ووصلت للجميع واؤجو للجميع الفائدة
حرر في تاريخ 2009/06/04 الساعة 03:10:15
درس جميل و مفيييد جدا فى عالم CSS تسلم إيدك
ahmed saleh في 2009/09/16 الساعة 12:09:45 صباحا