شرح عمل قائمة الأقسام الأساسية العمودية بتقنية css3

أقدم لكم شرح لعمل قائمة الأقسام الأساسية العمودية بتقنية css3

اول شىء معنا هى أكواد ال HTML التى ستستعمل فى الأداه

والتى يمكنك من خلالها التعديل عليها كما تريد :

<ul>

<li > <a href="رابط الصفحه هنا"><img src="http://im38.gulfup.com/LmV2W.png" />عنوان الصفحه هنا</a></li>

<li > <a href="رابط الصفحه هنا"><img src="http://im38.gulfup.com/LmV2W.png" />عنوان الصفحه هنا</a></li>

<li > <a href="رابط الصفحه هنا"><img src="http://im38.gulfup.com/LmV2W.png"  />عنوان الصفحه هنا</a></li>

<li > <a href="رابط الصفحه هنا"><img src="http://im38.gulfup.com/LmV2W.png" />عنوان الصفحه هنا</a></li>

<li > <a href="رابط الصفحه هنا"><img src="http://im38.gulfup.com/LmV2W.png"  />عنوان الصفحه هنا</a></li>

</ul>

طبعا بعضكم يعرف فائده كل وسم ، و البعض لا يعرف فساشرح لكم معناها :

ul : هي اختصار "unordered list" وهو عنصر يقوم بوضع نقاط لكل بند في القائمة .

li : هي اختصار "list item"  و هو عنصر يقوم بوضع البنود في القائمة  .

a  :  ارتباط تشعبي، والذي يستخدم لربط من صفحة واحدة إلى أخرى .

href : خاص باستدعاء الروابط .

img : أي صورة .

بعد ذلك ، يجب علينا ان نضيف بعض خصائص الـcss التى نستطيع من خلالها ان نغير شكل

القائمه كما نريد .

تحميل الكود من هنا 

و فى النهايه نضيف الأكواد على بعضها لكى تكون جاهزه للاضافه الى الادوات

أرجو ان تكونوا استفدتوا بالدرس و لاتترددوا فى السؤال الإستفسار في أي جزئ والجواب سيكون سريعا، و كما اخبرتكم ، ان تعليقاتكم هى التى تشجعنى على هذا العمل .

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



الكود مزود من مدونة خبراء الحاسوب شكرا له اضغط لايك

وأي استفسار في الموضوع لا تتردد فيه، لأننا دائما رهن إشارتكم

- الجانب البسيكولوجي في الموضوع

دائما يجب أن تقدر عزيزي القارئ المجهودات التي يبذلها المدون لكي يأتيك بموضوع هادف، وذلك عن طريق اما أن تعبر عن امتنانك له في القائمة الخاصة بالتعاليق أو أن تنشر الموضوع ونحن نأخذ كل هذه الأمور بعين الإعتبار، في اطار تنضيمنا لمسابقات  أو تقديمنا هدايا اعتبارية. وبه وجب الإعلام. <3 تقبلو تقديري <3