إرشادات استخدام المنتدى

   
   

الصفحة 1 من 6 1234 ... الأخيرةالأخيرة
عرض النتائج 1 إلى 10 من 53
  1. #1
    Array الصورة الرمزية rAiHaNaH
    تاريخ التسجيل
    Aug 2009
    الاقامه
    في غرفتي ( كم أحبها )
    المشاركات
    3,597
    التقييم
    2231684
    الجنس
    أنثى
    الدولة
    Saudi Arabia
    المتصفح
    Firefox
    نوع الجوال
    نوكيا NOKIA
    نظام الجهاز
    Windows 7
    المؤهل الدراسي
    جامعي
    مزاجي
    Confused

    افتراضي الدرس الثاني (الجزء الثاني): الصورة مالها وما عليها في لغة الـCSS



    بسم الله توكلنا على الله :

    شدوا الأحزمة وركزوا جدًا
    الدرس هذا منوع وطرق متعدده.... لا تعتمدين على طريقة أحد
    بإمكانك الآن تضعين بصمتك الخاصة على العمل ... كل عمل وله بصمة خاصة فيه
    محدش يقول لي شفت تطبيق البنات وتطبيقي موب مثله
    الدرس دسم شوي ويبغى كاسة شاي مدري قهوة



    الصورة كخلفية :


    لإدخال صورة الفراشة كخلفية للصفحة قومي بتفعيل خاصية background-image للعنصر <body> وحددي مسار الصورة:
    بيني وبينكم أنا أسمي الخاصية background واكتب بعد ( : ) نوع الخلفية صورة أو لون ^^

    كود:
    body {
            background-color: #FFCC66;
            background-image: url("img/logo.png");
        }

    تكرار صورة الخلفية repeat :

    repeat-x ::




    repeat-y ::




    repeat ::




    no-repeat ::



    (طريقة التكرار الأفقي هذا اللي استخدمته في هيدر المنتدى ^^)



    تثبيت صورة الخلفية


    scroll : لصورة ستتحرك مع الصفحة
    fixed : الصورة ستبقى ثابتة

    ----------------

    مثال تطبيقي للجميع :

    كود:
    body {
    ; background: #FFCC66  url(img/logo.png) repeat-y scroll
    
    }
    أحبكم آل لها


  2. #2
    Array الصورة الرمزية rAiHaNaH
    تاريخ التسجيل
    Aug 2009
    الاقامه
    في غرفتي ( كم أحبها )
    المشاركات
    3,597
    التقييم
    2231684
    الجنس
    أنثى
    الدولة
    Saudi Arabia
    المتصفح
    Firefox
    نوع الجوال
    نوكيا NOKIA
    نظام الجهاز
    Windows 7
    المؤهل الدراسي
    جامعي
    مزاجي
    Confused

    افتراضي

    مكان صورة الخلفية position :

    تلقائياً توضع صورة الخلفية في أعلى يسار الصفحة، الخاصية position تسمح لكِ بتغيير هذه القيمة التلقائية ووضع الصورة في أي مكان ترغبينه من الشاشة
    هناك طرق مختلفة لتحديد قيمة الـ position
    (سأذكر الطريقة التي أستخدمها لأني لاحظتها الأسهل ^^)

    إذا أردنا للصورة أن يكون موقعها على بعد 150 بكسل من أعلى الصفحة، و600 بكسل من يسار الصفحة فعلينا أن نكتب أوامر CSS بهذه الطريقة:

    كود:
    logo {
            position:absolute;
            top: 150px;
            left: 600px;
        }
    أيضًا بإمكاننا استخدام bottom (يعني اسفل) و right (يعني يمين)


    و absolute تعني ان الوضعية مُطلقة يعني : أن الصورة تتحرك من مكانها لو مثلًا صغرت نافذة المتصفح
    أما relative فتعني الوضعية النسبية : أي أن الصورة تبقى في مكانها ولا تتحرك



    الواجب

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

    * اقتراح: احتفظي بواجباتك اللي أنجزتيها وتجاربك في مجلد خاص.. لأنه ان شاء الله بيجي يوم وتضحكين على نفسك :$ < محد جربها ابد ;p

    أحبكم آل لها


  3. #3
    عضو فعال Array الصورة الرمزية صائدة الفوائد
    عضوة متميزة
    تاريخ التسجيل
    Oct 2010
    الاقامه
    في مُلكِ الرحمن
    المشاركات
    212
    التقييم
    494596
    الجنس
    أنثى
    الدولة
    Palestine
    المتصفح
    Internet Explorer
    نوع الجوال
    إل جي LG  
    نظام الجهاز
    Windows 7
    مزاجي
    Amazed

    افتراضي

    درس خَفيفْ ظَريفْ ولَطيفْ >





    اقتراح: احتفظي بواجباتك

    اللي أنجزتيها وتجاربك في مجلد خاص.. لأنه ان شاء الله بيجي يوم وتضحكين على
    نفسك
    :$ < محد جربها ابد ;p



    ذَكرتني بالذي مضى وذهب وانقضى

    تَطبيقاتي الفوتوشوبية القَديمة >

    -

    تَسجيل حُضور ولي عَودة عندما أستيقظ
    ربي تعبت فارحمني ياربي

  4. #4
    عضو فعال Array الصورة الرمزية صائدة الفوائد
    عضوة متميزة
    تاريخ التسجيل
    Oct 2010
    الاقامه
    في مُلكِ الرحمن
    المشاركات
    212
    التقييم
    494596
    الجنس
    أنثى
    الدولة
    Palestine
    المتصفح
    Internet Explorer
    نوع الجوال
    إل جي LG  
    نظام الجهاز
    Windows 7
    مزاجي
    Amazed

    افتراضي

    اقتباس المشاركة الأصلية كتبت بواسطة rAiHaNaH مشاهدة المشاركة
    مكان صورة الخلفية position :

    تلقائياً توضع صورة الخلفية في أعلى يسار الصفحة، الخاصية position تسمح لكِ بتغيير هذه القيمة التلقائية ووضع الصورة في أي مكان ترغبينه من الشاشة
    هناك طرق مختلفة لتحديد قيمة الـ position
    (سأذكر الطريقة التي أستخدمها لأني لاحظتها الأسهل ^^)

    إذا أردنا للصورة أن يكون موقعها على بعد 150 بكسل من أعلى الصفحة، و600 بكسل من يسار الصفحة فعلينا أن نكتب أوامر CSS بهذه الطريقة:

    كود:
    logo {
            position:absolute;
            top: 150px;
            left: 600px;
        }
    أيضًا بإمكاننا استخدام bottom (يعني اسفل) و right (يعني يمين)


    و absolute تعني ان الوضعية مُطلقة يعني : أن الصورة تتحرك من مكانها لو مثلًا صغرت نافذة المتصفح
    أما relative فتعني الوضعية النسبية : أي أن الصورة تبقى في مكانها ولا تتحرك



    الواجب

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

    * اقتراح: احتفظي بواجباتك اللي أنجزتيها وتجاربك في مجلد خاص.. لأنه ان شاء الله بيجي يوم وتضحكين على نفسك :$ < محد جربها ابد ;p

    عزيزتي أنتِ أخبرتنا بأسهل طَريقة بالنسبة لكِ هلا أخبرتنا بالطرق الأخرى

    هذه الطريقة لم تنجح معي أبداً حاولتْ ولم تَنجح أرجو ذكر الطرق الأخرى بالتفصيل
    ربي تعبت فارحمني ياربي

  5. #5
    عضو فعال Array الصورة الرمزية صائدة الفوائد
    عضوة متميزة
    تاريخ التسجيل
    Oct 2010
    الاقامه
    في مُلكِ الرحمن
    المشاركات
    212
    التقييم
    494596
    الجنس
    أنثى
    الدولة
    Palestine
    المتصفح
    Internet Explorer
    نوع الجوال
    إل جي LG  
    نظام الجهاز
    Windows 7
    مزاجي
    Amazed

    افتراضي

    مُلاحظة : أستخدم النوت باد وليس لدريم ويفر

    وأٍستخدم الطريقة الثالثة في التطبيق
    ربي تعبت فارحمني ياربي

  6. #6
    رحيــ ووصلكم باق ـــل Array الصورة الرمزية حورآء
    تاريخ التسجيل
    Jan 2009
    الاقامه
    في عرائش الدعوة
    المشاركات
    2,772
    التقييم
    2408016
    الجنس
    أنثى
    الدولة
    Saudi Arabia
    المتصفح
    Firefox
    نوع الجوال
    آيفون iPhone
    نظام الجهاز
    Windows 7
    مزاجي
    Innocent

    افتراضي

    تسجيل حضور بعد قراءة الدرس ولي عودة باذن الله للقراءة مرات وكرات الى ان يدخل ذذ


    رحيل يجتاح مدينتي ليحيلها خواء الا من ذكرى خالده

    لا يأس يسكننا فإن كبر الأســى
    وطغى فإن يقـين قلبـــــــي أكبر
    في منهج الرحمان أمن مخاوفي
    وإليه في ليل الشدائــــــــد نجأر

  7. #7
    طموحي يلامس عنان السماء Array
    تاريخ التسجيل
    Oct 2009
    المشاركات
    95
    التقييم
    8037
    الجنس
    أنثى

    افتراضي

    نفس الطريقة تستخدم في تنسيق الجداول في الصفحة
    تسجيل حضور وعودة وقت الرواق للتطبيق
    وشكراً على الدرس :)

  8. #8
    الحياة حلوة ^________^ Array الصورة الرمزية *همسة*
    تاريخ التسجيل
    Feb 2011
    الاقامه
    في بيتنا :)
    المشاركات
    1,108
    التقييم
    249654
    الجنس
    أنثى
    الدولة
    Morocco
    مزاجي
    Shocked

    افتراضي




    هييي درس جديد


    يافرحتي





    علم يا باشا



    جاري التنفيذ
    السرقة الموصوفة :)

  9. #9
    الحياة حلوة ^________^ Array الصورة الرمزية *همسة*
    تاريخ التسجيل
    Feb 2011
    الاقامه
    في بيتنا :)
    المشاركات
    1,108
    التقييم
    249654
    الجنس
    أنثى
    الدولة
    Morocco
    مزاجي
    Shocked

    Icon (30)



    (طريقة التكرار الأفقي هذا اللي استخدمته في هيدر المنتدى ^^)

    جن جنوني وأنا أبحث عن التكرار الذي بهيدر المنتدى
    وييييييييييييييينه
    السرقة الموصوفة :)

  10. #10
    حيثما كنت اترك خلفك نورا Array الصورة الرمزية زهرة السماء
    تاريخ التسجيل
    Mar 2009
    الاقامه
    في جزيرة أحلامي وحيث الأمل
    المشاركات
    11,593
    التقييم
    5259727
    الجنس
    أنثى
    الدولة
    Sudan
    المتصفح
    Firefox
    نوع الجوال
    سامسونج SAMSUNG
    نظام الجهاز
    Windows xp
    المؤهل الدراسي
    جامعي

    افتراضي

    كل ماقلنا هانت جاء اللي اصعب يكاد رأسي يلف ذذ
    لي عودة إن شاء الله لأطبق واركز وامخمخ ><






    قدموا حسن الظن في كل اموركم ..

الصفحة 1 من 6 1234 ... الأخيرةالأخيرة

المواضيع المتشابهه

  1. الدرس الثاني(الجزء الثالث): تصميم ستايل المنتدى
    بواسطة rAiHaNaH في منتدى |استايلات الجيل الرابع| بدأت
    مشاركات: 39
    آخر مشاركة: 12-03-2012, 08:52 PM
  2. الدرس الأول (الجزء الثاني) : مدخل للغة الـ CSS
    بواسطة rAiHaNaH في منتدى |استايلات الجيل الرابع| بدأت
    مشاركات: 85
    آخر مشاركة: 01-03-2012, 05:02 PM
  3. الدرس الثالث : ...| شرح قوائم برنامج الكلك الجزء الثاني ...|
    بواسطة نووووف في منتدى |هندسة الحرف| انتهت
    مشاركات: 110
    آخر مشاركة: 05-11-2010, 11:40 PM
  4. الدرس الثاني : ...| شرح قوائم برنامج الكلك الجزء الأول ...|
    بواسطة نووووف في منتدى |هندسة الحرف| انتهت
    مشاركات: 57
    آخر مشاركة: 03-11-2010, 10:06 PM
  5. إكسسوارات من الخرز الجزء الثاني
    بواسطة إريام في منتدى للجمال عنوان
    مشاركات: 4
    آخر مشاركة: 13-08-2007, 10:08 PM

مواقع النشر (المفضلة)

مواقع النشر (المفضلة)

تعليمات المشاركة

  • لا تستطيع إضافة مواضيع جديدة
  • لا تستطيع الرد على المواضيع
  • لا تستطيع إرفاق ملفات
  • لا تستطيع تعديل مشاركاتك
  •  



جميع الحقوق محفوظه©