بحث متقدم | التسجيل
الويب العربي
  تسجيل دخول
 
   
   

  ملاحظة
الموقع متاح للإطلاع والقراءة فقط، المشاركة والمواضيع الجديدة غير متاحة حالياً لحين تطوير الموقع.




الموقع متاح للإطلاع والقراءة فقط، المشاركة والمواضيع الجديدة غير متاحة حالياً لحين تطوير الموقع.

عـودة للخلف   الويب العربي دليل ومكتبة الويب العربي مكتبة الويب العربي ويب 2.0 وأكواد متنوعة

بحث
links

ويب 2.0 وأكواد متنوعة
ويب 2.0 وأكواد وأدوات متنوعة لتطوير المواقع
Ajax , XML , CSS , JavaScript ...etc

المحتويات
zip  css لإنشاء قائمة اوليمبية رائعة ملونة لموقعك الزر الأيسر : حفظ ، الزر الأيمن : حفظ بإسم

  نبذة : هذه قائمة اوليمبية رائعة
من الممكن الاستفادة منها فى المواقع الرياضية
تحمل 5 روابط
ذات الوان باهتة يتم اظهارها بالوقوف عليها


مثال :

لمشاهدة مثال اضغط هنا

صفحة المثال حصرية للويب العربى


صورة :




التركيب :

1--انسخ هذا الكود بمنطقة الـ head

كود:
<style type="text/css">

#clouds {background: url (clouds.jpg); padding:2em 0; position:relative;}

ul#off {list-style-type:none; padding:0; margin:0; width:360px; height:180px; margin:2em auto; position:relative;}
ul#off li {display:block; width:0; height:0;}

ul#off a {display:block; width:0; height:0; text-decoration:none; position:absolute;}
ul#off a.blue {top:0; left:0; color:#fff;}
ul#off a.black {top:0; left:120px; color:#fff;}
ul#off a.red {top:0; left:240px; color:#fff;}
ul#off a.yellow {top:60px; left:60px; color:#000;}
ul#off a.green {top:60px; left:180px;color:#000;}

ul#off a em {position:absolute; display:block; cursor:pointer; font-style:normal; font-weight:bold;}

ul#off a em.h6 {height:20px; width:120px; font-size:10px; font-style:normal; text-align:center; font-weight:bold; line-height:20px;}
ul#off a em.h3 {height:20px; width:60px;}
ul#off a em.h2 {height:20px; width:40px;}

ul#off a em.v4 {height:80px; width:20px;}
ul#off a em.v2 {height:40px; width:20px;}
ul#off a em.v1 {height:20px; width:20px;}

ul#off a em.ha {top:0; left:0;}
ul#off a em.hb {top:0; left:60px;}
ul#off a em.hc {top:100px; left:0;}
ul#off a em.hd {top:100px; left:80px;}

ul#off a em.va {top:20px; left:0;}
ul#off a em.vb {top:20px; left:100px;}
ul#off a em.vc {top:60px; left:100px;}
ul#off a em.vd {top:80px; left:0;}

.blue em {background:transparent url(http://www.cssplay.co.uk/menus/blue.gif);}
.black em {background:transparent url(http://www.cssplay.co.uk/menus/black.gif);}
.red em {background:transparent url(http://www.cssplay.co.uk/menus/red.gif);}
.yellow em {background:transparent url(http://www.cssplay.co.uk/menus/yellow.gif);}
.green em {background:transparent url(http://www.cssplay.co.uk/menus/green.gif);}

ul#off a:hover {background:#ddd;}
ul#off a.blue:hover em {background:#00c;}
ul#off a.black:hover em {background:#000;}
ul#off a.red:hover em {background:#c00;}
ul#off a.yellow:hover em {background:#ee0;}
ul#off a.green:hover em {background:#0c0;}

ul#off a:active, ul#off a:focus {background:#fff;}
ul#off a.blue:active em, ul#off a.blue:focus em {background:#66c; color:#000;}
ul#off a.black:active em, ul#off a.black:focus em {background:#666; color:#000;}
ul#off a.red:active em, ul#off a.red:focus em {background:#c66; color:#000;}
ul#off a.yellow:active em, ul#off a.yellow:focus em {background:#ee6; color:#000;}
ul#off a.green:active em, ul#off a.green:focus em {background:#6c6; color:#000;}


</style>
2--انسخ هذا الكود بمنطقة الـ body

كود:
<div id="clouds">


<ul id="off">
<li><a class="blue" href="#nogo"><em class="h6 ha"><font size="4">ازرق</font></em><em class="h3 hc"></em><em class="h2 hd"></em><em class="v4 va"></em><em class="v4 vb"></em></a></li>
<li><a class="black" href="#nogo"><em class="h6 ha"><font size="4">اسود</font></em><em class="h3 hc"></em><em class="h2 hd"></em><em class="v2 va"></em><em class="v1 vd"></em><em class="v4 vb"></em></a></li>
<li><a class="red" href="#nogo"><em class="h6 ha"><font size="4">احمر</font></em><em class="h6 hc"></em><em class="v2 va"></em><em class="v1 vd"></em><em class="v4 vb"></em></a></li>
<li><a class="yellow" href="#nogo"><em class="h2 ha"></em><em class="h3 hb"></em>
<em class="h6 hc" style="position: absolute; left: 0px; top: 100px; width: 120px; height: 20px">
<font size="4">اصفر</font></em><em class="v4 va"></em><em class="v1 vb"></em><em class="v2 vc"></em></a></li>
<li><a class="green" href="#nogo"><em class="h2 ha"></em><em class="h3 hb"></em><em class="h6 hc">
<font size="4">اخضر</font></em><em class="v4 va"></em><em class="v1 vb"></em><em class="v2 vc"></em></a></li>

</ul>



</div>

3--ارفع هذه الصورة لنفس مسار الصفحة بموقعك



قسم : ويب 2.0 وأكواد متنوعة 
 
مفضل Remove from My Favourites إرسال هذه الصفحة لصديق محتويات أخرى مقترحة
بواسطة : محمّد نور ابحث عن جميع المحتويات المضافة بواسطة هذا العضو
06-01-2008
الزيارات 185
206 بايت
 
 

قسم :
 
إنتقل إلى

جميع الأوقات بتوقيت مكة المكرمة. الساعة الآن » 05:49 PM.

Powered by vBulletin
Copyright ©2000 - 2021, Jelsoft Enterprises Ltd.


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

صحيفة متخصصة في متابعة أخبار وجديد الإنترنت العربي
والحوارات الصحفية ومعلومات تقنية متنوعة .

   
 
 

للتواصل مع فريق عمل الويب العربي
يمكنك ذالك من خلال مركز الدعم والمساندة.

 الدعم الفني |  اعتماد العضويات |  قوانين الإنتساب |  إتفاقية الإستخدام |  أهداف الويب العربي |  دليل الشركات |  مكتبة الويب |  صحيفة الويب العربي |  الرئيسية