الرئيسيةالرئيسية  بحـثبحـث  التسجيلالتسجيل  دخولدخول  
الرئيسية
صفحتنا في الفيسبوك
مشاركة
اعثر علينا على ?Google+?‏
الجديد الهام الأخبار روابط المعاجم مواقع الاعلانات
مذكرات واعلانات وزارية
مستجدات
تدبير عتبات الانتقال
الجريدة الرسمية
مماثلة وحساب الأجر
الموارد البشرية
الوضعية الادارية والمالية
فضاء المؤمن
مؤسسة محمد السادس
الخزينة العامة للمملكة
بوابة وزارة التربية الوطنية
بوابة الوزارة
الحركة الانتقالية الالكترونية
برنامج مسار
مسار التلميذ
مسار الولي
التكوين عن بعد
intra
taalim.ma
الموارد الرقمية TICE
فبراير كوم
هسبريس
كود نيشان
اليوم 24
هبة بريس
لكم
الصباح
المساء
اخبار مغربية
ومحلية
الجزيرة
العربية
france24
bbc
كوورة
حالة الطقس
الأستاذ docprof.com
جريدة الأستاذ للتعليم والتربية
المدرس
ملفنا
المستجد التربوي
العرفان
نبراس الأساتذة
جميع الأخبار
مسالك تعليمية
صحيفة الأستاذ
ملتقى الأجيال
كراسات تربوية
تربويات
دقاتر حرة
همام التربوي
دفاتر كوم
دفاتر نت
الباحث العربي
thefreedictionary
le-dictionnaire
ويكيبيديا بالعربية
fr.wikipedia
conjugueur.reverso
التشغيل العمومي
المنارة
وظيفة
بيت كوم
مديرية تكوين الأطر
الوظيفة
دوبيزل
المباريات والوظائف
بريس المغرب
التعليم العالي
مكتب التكوين المهني..
توجيه نت
توجيه بريس
الأقسام التحضيرية للمدارس العليا
الأقسام التحضيرية للمدارس العليا طنجة
المدرسة الوطنية للعلوم التطبيقية طنجة

شاطر | 
 

 كود css لاضافة صور جانبية لصفحة الموقع وعند مرور الماوس على الصور تظهر كاملة

استعرض الموضوع السابق استعرض الموضوع التالي اذهب الى الأسفل 
كاتب الموضوعرسالة
bahmed

avatar

الجنس : ذكر
عدد المساهمات : 272
قوة النشاط : 2828
تاريخ التسجيل : 03/08/2012

مُساهمةموضوع: كود css لاضافة صور جانبية لصفحة الموقع وعند مرور الماوس على الصور تظهر كاملة   الخميس 16 أغسطس - 7:22

كود css لاضافة صور جانبية لصفحة الموقع وعند مرور الماوس على الصور تظهر كاملة



يضاف هذا الكود بين وسمي head

الكود:
<style type="text/css">
ul.nav{
    list-style:none;
    padding:0;
    margin:0;
    position:fixed;
    right:-30px;
    top:140px;
}
 
li{
    height:50px;
    width:50px;
    background: #7d7e7d; /* Old browsers */
    background: -moz-linear-gradient(top, #7d7e7d 0%, #0e0e0e 100%); /* FF3.6+ */
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#7d7e7d), color-stop(100%,#0e0e0e)); /* Chrome,Safari4+ */
    background: -webkit-linear-gradient(top, #7d7e7d 0%,#0e0e0e 100%); /* Chrome10+,Safari5.1+ */
    background: -o-linear-gradient(top, #7d7e7d 0%,#0e0e0e 100%); /* Opera 11.10+ */
    background: -ms-linear-gradient(top, #7d7e7d 0%,#0e0e0e 100%); /* IE10+ */
    background: linear-gradient(top, #7d7e7d 0%,#0e0e0e 100%); /* W3C */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#7d7e7d', endColorstr='#0e0e0e',GradientType=0 ); /* IE6-9 */
    padding:10px;
    position:relative;
    border-radius:3px;
    -moz-border-radius:3px;
    -webkit-border-radius:3px;
    -webkit-transition: all 0.5s ease;
    -moz-transition: all 0.5s ease;
    -o-transition: all 0.5s ease;
    transition: all 0.5s ease;
    margin-bottom:2px
}
 
li:hover {
    margin-right:30px;
    -webkit-transition: all 0.5s ease;
    -moz-transition: all 0.5s ease;
    -o-transition: all 0.5s ease;
    transition: all 0.5s ease;
    background: #7D7E7D; /* Old browsers */
    background: -moz-linear-gradient(top, #59A48A 0%, #0E0E0E 100%); /* FF3.6+ */
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#59A48A), color-stop(100%,#0e0e0e)); /* Chrome,Safari4+ */
    background: -webkit-linear-gradient(top, #59A48A 0%,#0e0e0e 100%); /* Chrome10+,Safari5.1+ */
    background: -o-linear-gradient(top, #59A48A 0%,#0e0e0e 100%); /* Opera 11.10+ */
    background: -ms-linear-gradient(top, #59A48A 0%,#0e0e0e 100%); /* IE10+ */
    background: linear-gradient(top, #59A48A 0%,#0e0e0e 100%); /* W3C */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#59A48A', endColorstr='#0e0e0e',GradientType=0 ); /* IE6-9 */


</style>


يضاف هذا الكود بين وسمي body وهو عبارة عن مثال يجب تغييره حسب المحتوى

الكود:
<div class="nav">
<ul class="nav">
<li><a href="https://plus.google.com/112229254666494982894/posts" id="services" id="1"><img src="http://illiweb.com/fa/pbucket.gif" /></a></li>
<li><a href="http://www.facebook.com/arabi7" id="2"><img src="http://illiweb.com/fa/pbucket.gif" /></a></li>

</ul>





الرجوع الى أعلى الصفحة اذهب الى الأسفل
 
كود css لاضافة صور جانبية لصفحة الموقع وعند مرور الماوس على الصور تظهر كاملة
استعرض الموضوع السابق استعرض الموضوع التالي الرجوع الى أعلى الصفحة 
صفحة 1 من اصل 1

صلاحيات هذا المنتدى:لاتستطيع الرد على المواضيع في هذا المنتدى
مكتبات :: مكتبة التعلم :: تعلم الاعلاميات :: تعلم انشاء المواقع :: تعلم لغة css-
انتقل الى: