تكلمنا في الدرس السابق عن طريقه استقبال معلومات عن طريق ملف 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;
}
سيكون شكله هكذا
بعد ذلك سوف نقوم باذالة الفراغ بجانبها الايسر وذلك بكتابة
لاحظ انه تم استخدام
padding
وتعني
مساحة او مسافة الى الداخل
وتم وضعها صفر اي بدون مسافه
هنا يكون الشكل بعد الاضافه
شكل الكود
كود PHP:
ul{
list-style-type:none;
background-color:gray;
padding:0;
}
لو تلاحظ بان المنطقه المظلله باللون الرمادي قد اخذت كامل العرض فهي افتراضيا تاخذ العرض 100%
ونحن نريدها بحجم معين
نقوم بكتابة هذا الكود
شكل الكود
كود PHP:
ul{
list-style-type:none;
background-color:gray;
padding:0;
width:300px;
}
هكذا تم الانتهاء من ul
نذهب الان للتعديل على ما بداخل ال ul
دائما ال ul تاخذ داخلها li
والقصد من ال li هو العنصر في القائمة
لتعديل على عناصر القائمة
نكتب الكود التالي :
هنا قلنا له نريد ال li التي تكون داخل ul
ال li هنا لدينا تحت بعضها ونحن نريدها متجانبة
ما سوف نقوم به هو
سوف نعطني ال li عرض ونحدد الجهه لها
كود PHP:
ul li{
width:100px;
float:left;
}
هنا قلنا له العرض 100 بكسل واجعل العنصر يلزم الجهه اليسار
وبنا انه لدينا عرض ال ul 300 وعدد العناصر 3 عرض كل منها 100 سوف يقوم برصها بجانب بعضها البعض
ليكون الشكل
نكتفي بهذا القدر الان
في الدرس القادم سوف نقوم بتحريك هذا العناصر من اليمين الى اليسار مع عرض واحد فقط كل مره
رد مع اقتباس
