الموضوع: الدرس الثاني تنسيق ما تم استقبال من XML دورة jquery & CSS

تكلمنا في الدرس السابق عن طريقه استقبال معلومات عن طريق ملف xml

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

هذا الدرس فاتح شهية لما هو بعده

في ملف ال index.php

نستبدل
CSS/ui-lightness/jquery-ui-1.8.2.custom.css

ب
CSS/style.css

الصوره لما تم استقبالة قبل التنسيق



لو تلاحضون انه تم استخدام

كود PHP:


<ul class="conts">
</ul> 


وهي عبارة عن قائمة

اول ما سوف نقوم به هو ازالة النقط بجانبها

في ملف
CSS/style.css

نقوم بكتابة

كود PHP:

ul{
list-style-type:none;    
} 


اي بمعنى بدون شكل بداية


ثم نقوم باعطائها لون خلفية
نقوم بكتابة

كود PHP:

background-color:gray; 


ليكون شكل الكود

كود PHP:

ul{
list-style-type:none;
background-color:gray;    
} 


سيكون شكله هكذا


بعد ذلك سوف نقوم باذالة الفراغ بجانبها الايسر وذلك بكتابة

كود PHP:

padding:0; 


لاحظ انه تم استخدام
padding
وتعني
مساحة او مسافة الى الداخل
وتم وضعها صفر اي بدون مسافه
هنا يكون الشكل بعد الاضافه



شكل الكود

كود PHP:

ul{
list-style-type:none;
background-color:gray;    
padding:0;
} 


لو تلاحظ بان المنطقه المظلله باللون الرمادي قد اخذت كامل العرض فهي افتراضيا تاخذ العرض 100%

ونحن نريدها بحجم معين
نقوم بكتابة هذا الكود

كود PHP:

width:300px; 


شكل الكود

كود PHP:

ul{
list-style-type:none;
background-color:gray;
padding:0;    
width:300px;
} 


هكذا تم الانتهاء من ul
نذهب الان للتعديل على ما بداخل ال ul

دائما ال ul تاخذ داخلها li
والقصد من ال li هو العنصر في القائمة

لتعديل على عناصر القائمة

نكتب الكود التالي :

كود PHP:

ul li{

} 


هنا قلنا له نريد ال li التي تكون داخل ul

ال li هنا لدينا تحت بعضها ونحن نريدها متجانبة

ما سوف نقوم به هو
سوف نعطني ال li عرض ونحدد الجهه لها

كود PHP:

ul li{
width:100px;
float:left;
} 


هنا قلنا له العرض 100 بكسل واجعل العنصر يلزم الجهه اليسار

وبنا انه لدينا عرض ال ul 300 وعدد العناصر 3 عرض كل منها 100 سوف يقوم برصها بجانب بعضها البعض

ليكون الشكل



نكتفي بهذا القدر الان

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