إن كنت تبرمج تطبيقات للويب، وتحتاج لعرض بعض البيانات على هيئة Grid، فهذا الدرس يعطيك طريقة سهلة وسريعة لعرض بيانات عضوية على شكل جدول .. كالمستعملة في موقع Youtube
الطريقة بسيطة وأكثر احترافية من الطريقة المستعملة في Youtube حيث استعمل الموقع وسوم div بكثرة.
استعمال Bulleted List:
<h2></h2> <ul> <li> <span></span></li> <li> <span></span></li> <li> <span></span></li> <li> <span></span></li> <li> <span></span></li> </ul>
طبع البيانات:
<h2>Profile</h2> <ul> <li>name: <span>cssbit</span></li> <li>channel views: <span>158</span></li> <li>age: <span>54</span></li> <li>joined: <span>february 12, 2007</span></li> <li>last sign in: <span>1 week ago</span></li> <li>videos watched <span>1,505</span></li> <li>subscribers: <span>5</span></li> <li>country: <span>morocco</span></li> </ul>
ما ستضيفه الان في CSS:
ul { position: relative; } ul li { border-bottom:1px dotted #ccc } ul li span { position: absolute; right:05px }
من المهم جدا أن تعطي الخاصية: relative للقائمة UL كي تستطيع تحريك القائمة او تغيير العرض والمكان وستبقى البيانات دائما في صندوق UL كذلك هذا مهم كي يتم احتساب المسافة في Right من يمين UL وليس من يمين الصفحة Body
الان استعمل مهارتك في CSS لتنسيق البيانات بخط جميل ولون مناسب ..
رائع :)