|
|
|
|
أدوات الموضوع | انواع عرض الموضوع |
08-03-2013, 05:19 PM | #1 |
مدون نشيط
تاريخ التسجيل: May 2013
الدولة: الناظور المغرب
المشاركات: 144
|
كيف تنشئ قائمة عمودية للأقسام الأساسية
كيف تنشئ قائمة عمودية للأقسام الأساسية بتقنية css3
أقدم لكم شرح لعمل قائمة الأقسام الأساسية العمودية بتقنية css3 للبث الحي اضغط هنا ✔ اول شىء معنا هى أكواد ال HTML التى ستستعمل فى الأداه والتى يمكنك من خلالها التعديل عليها كما تريد : كود بلغة 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 التى نستطيع من خلالها ان نغير شكل القائمه كما نريد . كود بلغة HTML:
#vbar ul{list-style-type:none;list-style: none;margin:0px;padding:0px 8px 6px 8px;border-top:1px solid #d6d6d6;} #vbar ul li{background:#f8f7f7;padding:10px 10px;margin-right: 6px;color:#666;box-shadow:inset 0 0 1px #fff;border-bottom:1px solid #d6d6d6;border-left:1px solid #d6d6d6;border-right:1px solid #d6d6d6;margin:0;-webkit-transition: All 0.5s ease;-moz-transition: All 0.5s ease;-o-transition: All 0.5s ease;-ms-transition: All 0.5s ease;transition: All 0.5s ease;} #vbar ul li:hover{background:#efefef;box-shadow:inset 0 0 2px #ddd;-webkit-transition: All 0.5s ease;-moz-transition: All 0.5s ease;-o-transition: All 0.5s ease;-ms-transition: All 0.5s ease;transition: All 0.5s ease;} #vbar a{text-decoration:none;color:#2D2D2D;} #vbar a:hover{text-decoration:none;color:#037DFF;} #vbar h2{margin:8px;color:#666;border:1px solid #d6d6d6;background: -moz-linear-gradient(top, #f8f8f8, #eaeaea);background: -webkit-gradient(linear top, #f8f8f8, #eaeaea);background: -ms-linear-gradient(top, #f8f8f8, #eaeaea);background: -o-linear-gradient(top, #f8f8f8, #eaeaea);padding:8px;font-family:'alweeam', 'Droid Arabic Kufi', Arial,Helvetica,Sans-serif;font-size:12px;line-height:24px;font-weight:bold;-webkit-transition: All 1s ease;-moz-transition: All 1s ease;-o-transition: All 1s ease;-ms-transition: All 1s ease;transition: All 1s ease;} #vbar ul li a {color:#000;font-size:12px;font-family: Tahoma, Arial;font-weight: normal;text-decoration: none;-webkit-transition: All 0.5s ease;-moz-transition: All 0.5s ease;-o-transition: All 0.5s ease;-ms-transition: All 0.5s ease;transition: All 0.5s ease;} #vbar .widget { border: 1px solid #ddd; background-color: #fff; margin-bottom: 10px; box-shadow:inset 0 0 4px #eee; } .menu a img {float:right;padding-left:10px;} #vbar { width:400px; height :200px; } و فى النهايه نضيف الأكواد على بعضها لكى تكون جاهزه للاضافه الى الادوات لكى تصبح : كود بلغة HTML:
<style>#vbar ul{list-style-type:none;list-style: none;margin:0px;padding:0px 8px 6px 8px;border-top:1px solid #d6d6d6;}#vbar ul li{background:#f8f7f7;padding:10px 10px;margin-right: 6px;color:#666;box-shadow:inset 0 0 1px #fff;border-bottom:1px solid #d6d6d6;border-left:1px solid #d6d6d6;border-right:1px solid #d6d6d6;margin:0;-webkit-transition: All 0.5s ease;-moz-transition: All 0.5s ease;-o-transition: All 0.5s ease;-ms-transition: All 0.5s ease;transition: All 0.5s ease;}#vbar ul li:hover{background:#efefef;box-shadow:inset 0 0 2px #ddd;-webkit-transition: All 0.5s ease;-moz-transition: All 0.5s ease;-o-transition: All 0.5s ease;-ms-transition: All 0.5s ease;transition: All 0.5s ease;}#vbar a{text-decoration:none;color:#2D2D2D;}#vbar a:hover{text-decoration:none;color:#037DFF;}#vbar h2{margin:8px;color:#666;border:1px solid #d6d6d6;background: -moz-linear-gradient(top, #f8f8f8, #eaeaea);background: -webkit-gradient(linear top, #f8f8f8, #eaeaea);background: -ms-linear-gradient(top, #f8f8f8, #eaeaea);background: -o-linear-gradient(top, #f8f8f8, #eaeaea);padding:8px;font-family:'alweeam', 'Droid Arabic Kufi', Arial,Helvetica,Sans-serif;font-size:12px;line-height:24px;font-weight:bold;-webkit-transition: All 1s ease;-moz-transition: All 1s ease;-o-transition: All 1s ease;-ms-transition: All 1s ease;transition: All 1s ease;}#vbar ul li a {color:#000;font-size:12px;font-family: Tahoma, Arial;font-weight: normal;text-decoration: none;-webkit-transition: All 0.5s ease;-moz-transition: All 0.5s ease;-o-transition: All 0.5s ease;-ms-transition: All 0.5s ease;transition: All 0.5s ease;}#vbar .widget { border: 1px solid #ddd; background-color: #fff; margin-bottom: 10px; box-shadow:inset 0 0 4px #eee; }.menu a img {float:right;padding-left:10px;}</style> <div id="vbar"> <ul> <li class="menu"><a href="رابط الصفحه هنا"><img src="http://im38.gulfup.com/LmV2W.png" />عنوان الصفحه هنا</a></li> <li class="menu"><a href="رابط الصفحه هنا"><img src="http://im38.gulfup.com/LmV2W.png" />عنوان الصفحه هنا</a></li> <li class="menu"><a href="رابط الصفحه هنا"><img src="http://im38.gulfup.com/LmV2W.png" />عنوان الصفحه هنا</a></li> <li class="menu"><a href="رابط الصفحه هنا"><img src="http://im38.gulfup.com/LmV2W.png" />عنوان الصفحه هنا</a></li> <li class="menu"><a href="رابط الصفحه هنا"><img src="http://im38.gulfup.com/LmV2W.png" />عنوان الصفحه هنا</a></li> </ul> </div> أرجو ان تكونوا استفدتوا بالدرس و لاتترددوا فى السؤال الإستفسار في أي جزئ والجواب سيكون سريعا على هذا الرابط، - See more at: http://www.ahramnet.com/2013/08/css3....PMAV6NJd.dpuf
__________________
نحن أشخاص من مختلف البلدان، يجمعنا عالم التدوين، لنصبح عائلة غيورين على بعضهم، ونلتقي أحيانا في منزلنا المعنون ب معهد خبراء البلوجر AhramNet.Com <a href="http://www.Ahramnet.com/" target="_blank" title="أهرام نت"><img src="http://AhramNet.com/WUjsb.png" border="0" alt="أهرام نت" /></a> |
08-06-2013, 01:46 AM | #2 |
مدون نشيط
تاريخ التسجيل: Jun 2013
الدولة: المملكة الاسلامية المغربية
المشاركات: 153
|
رد: كيف تنشئ قائمة عمودية للأقسام الأساسية
__________________
|
08-06-2013, 01:58 AM | #3 |
مدون نشيط
تاريخ التسجيل: Dec 2012
المشاركات: 161
|
رد: كيف تنشئ قائمة عمودية للأقسام الأساسية
__________________
|
08-06-2013, 02:40 AM | #4 |
مدون جديد
تاريخ التسجيل: Jul 2013
المشاركات: 14
|
رد: كيف تنشئ قائمة عمودية للأقسام الأساسية
__________________
|
08-06-2013, 05:51 AM | #5 |
مدون نشيط
تاريخ التسجيل: Jun 2013
الدولة: المملكة الاسلامية المغربية
المشاركات: 153
|
رد: كيف تنشئ قائمة عمودية للأقسام الأساسية
__________________
|
08-06-2013, 03:38 PM | #6 |
مدون نشيط
تاريخ التسجيل: May 2013
الدولة: الناظور المغرب
المشاركات: 144
|
رد: كيف تنشئ قائمة عمودية للأقسام الأساسية
__________________
نحن أشخاص من مختلف البلدان، يجمعنا عالم التدوين، لنصبح عائلة غيورين على بعضهم، ونلتقي أحيانا في منزلنا المعنون ب معهد خبراء البلوجر AhramNet.Com <a href="http://www.Ahramnet.com/" target="_blank" title="أهرام نت"><img src="http://AhramNet.com/WUjsb.png" border="0" alt="أهرام نت" /></a> |
08-11-2013, 02:32 PM | #7 |
مدون جديد
تاريخ التسجيل: Aug 2013
المشاركات: 13
|
رد: كيف تنشئ قائمة عمودية للأقسام الأساسية
__________________
girl arcade http://girlarcade.blogspot.com ******* تعليم السياقة بالمغرب http://coderoute-2013.blogspot.com ******* ثقافة عامة http://t9fa.blogspot.com |
08-13-2013, 11:15 AM | #8 |
مدون نشيط
تاريخ التسجيل: May 2013
الدولة: الناظور المغرب
المشاركات: 144
|
رد: كيف تنشئ قائمة عمودية للأقسام الأساسية
__________________
نحن أشخاص من مختلف البلدان، يجمعنا عالم التدوين، لنصبح عائلة غيورين على بعضهم، ونلتقي أحيانا في منزلنا المعنون ب معهد خبراء البلوجر AhramNet.Com <a href="http://www.Ahramnet.com/" target="_blank" title="أهرام نت"><img src="http://AhramNet.com/WUjsb.png" border="0" alt="أهرام نت" /></a> |
08-13-2013, 06:13 PM | #9 |
مدون جديد
تاريخ التسجيل: Aug 2013
المشاركات: 14
|
رد: كيف تنشئ قائمة عمودية للأقسام الأساسية
__________________
|
08-13-2013, 10:38 PM | #10 |
مدون جديد
تاريخ التسجيل: Aug 2013
المشاركات: 10
|
رد: كيف تنشئ قائمة عمودية للأقسام الأساسية
|
مواقع النشر (المفضلة) |
الكلمات الدلالية (Tags) |
للأقسام, الأساسية, تنشئ, عمودية, قائمة |
الذين يشاهدون محتوى الموضوع الآن : 1 ( الأعضاء 0 والزوار 1) | |
|
|
المواضيع المتشابهه | ||||
الموضوع | كاتب الموضوع | المنتدى | مشاركات | آخر مشاركة |
كيف اعمل قائمة مثل هذه | Abdelhak elouajdi | طلبات الدعم الفني | 1 | 07-04-2013 01:23 AM |
أفضل قائمة منسدلة على بلوجر (قائمة Mashable معربة) | admin | إضافات وأدوات بلوجر | 8 | 06-12-2013 03:37 PM |
كيف أنشئ قائمة!! | Perfect | طلبات الدعم الفني | 1 | 11-08-2012 08:11 PM |
طلب قائمة - يوجد مثال | Youness | طلبات الدعم الفني | 2 | 11-05-2012 12:35 PM |
قائمة منسندلة | hassano | طلبات تعديل القوالب | 2 | 09-09-2012 07:45 PM |
الساعة الآن 06:59 AM - بتوقيت جرينتش
المعهد غير مسؤول عن أي اتفاق تجاري أو
تعاوني بين الأعضاء فعلى كل شخص تحمل مسؤولية نفسه تجاه ما يقوم به من بيع وشراء وإتفاق وإعطاء معلومات مدونته التعليقات المنشورة لا تعبر عن رأي معهد خبراء البلوجر ولا نتحمل أي مسؤولية قانونية حيال ذلك (ويتحمل كاتبها مسؤولية النشر) |