معهد خبراء بلوجر - كيف تنشئ قائمة عمودية للأقسام الأساسية

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

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

http://1.bp.blogspot.com/-24_spf6dY8...-04_175241.png

http://4.bp.blogspot.com/-bcUjsfkbi4...-04_170601.png

للبث الحي اضغط هنا ✔

اول شىء معنا هى أكواد ال 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