1. المٌقدمة الأولي :دورة إختبار ثغرات حقن قواعد البيانات SQLI الإحترافية لعام 2017 عام 2018
    تٌعد ثغرات حقن قواعد البينات الثغرة رقم واحد فى العالم والمصنفة تحت بند الإخطر
    والفريق التابع له بإختراق أكبر المواقع الصهيونية قرائة الموضوع
  2. المٌقدمة الثانية : دورة إختبار ثغرات حقن قواعد البيانات SQLI الإحترافية لعام 2017 عام 2018
    في هذه المٌثقدمة الثانية والأخيرة سوف نتعرف على قواعد علم حقن قواعد البيانات
    حتى يتثنى لنا علم يٌساعدنا على القيام بعمليات الحقن بالطرق الصحيحه قرائة الموضوع
  3. دورة كشف دمج والتلغيم حصريا على أرض عراق تيم(2017)
    بعد ماقمت بعمل دورة الكشف دمج والتلغيم وستكملت الدوره وتحتوي على 12 درس
    كانت دروس حصريا على عراق تيم وشرح واضح جدا ومفهوم الى المبتدأ والى المبدع قرائة الموضوع

درس بسيط عمل زر بتقنية Css روعه

الموضوع في 'لغة الأنماط القياسية css' بواسطة منير, بتاريخ ‏3 يناير 2013.

كاتب الموضوع : منير المشاهدات : 1,603 الردود : 3 ‏3 يناير 2013
  1. غير متصل

    منير Guest

    عضو منذ:

    بسم الله الرحمن الرحيم

    . : : السلام عليكم و رحمة الله و بركاته : : .
    ! اليوم عندي لكم شرح !
    . : : شرح عمل زر متحرك بتقنية Css : : .
    البرنامج المستخدم
    Microsoft Expression Web
    -
    [ نتيجة الدرس ]
    V
    [​IMG]

    . : : الشرح : : .
    عند فتح صفحة Html
    تكون الاكواد كذا :



    كود PHP:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=windows-1256" /><title>32كـراك للتصميم</title></head><body></body></html>

    -----------------------
    نقوم بإضافة



    كود PHP:
    <style></style>

    -----------------------
    داخل الوسم :



    كود PHP:
    <head></head>

    -----------------------
    فيصبح الكود كاملاً كذا :



    كود PHP:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=windows-1256" /><title>32 كـراك للتصميم</title><style></style></head><body></body></html>

    -----------------------
    الان
    نضيف بين



    كود PHP:
    <body></body>

    هذا الكود


    كود PHP:
    <p></p

    -----------------------
    و نعطي الكود كلاس خاص فيه
    و سمينا الكلاس krak
    فيصير :



    كود PHP:
    <class="krak"></p>

    -----------------------
    و الكلام اللي بيكون بالزر
    نكتب مثلا كـراك للتصميم
    فيكون كذا :



    كود PHP:
    <class="krak">كراك للتصميم</p>

    و الان خلصنا من اكواد الزر
    باقي اضافة الخصائص له
    من الوان و حجم و حدود . . . . . الخ

    ----------------------------------------------
    -----------------------
    --------------
    طبعا الخصائص تكون داخل الوسم :



    كود PHP:
    <style></style>

    -----------------------
    الان بنضيف له
    خواص له
    و بالترتيب

    1 - الحدود .
    2 - الطول .
    3 - العرض .
    4 - نوع الخط .
    5 - حجم الخط .
    6 - الخلفية .
    7 - لون الخط .
    8 - التباعد .
    9 - المحاذاه .
    10 - الموضع .

    ---
    نفتح كتابة الخواص بـ



    كود PHP:
    .krak{

    ثم نكتب هذي الخواص :


    كود PHP:
        border:1px #999999 dashed;    border:1px #999999 dashed;    height:15px;    width:80px;    font-family:Tahoma;    font-size:12px;    background:#F8F8F8;    color:#CC0099;    padding:0px 0px 0px 0px;    text-align:center;    position:relative;

    و نغلقها بـ


    كود PHP:
    }

    فيصير كود الصفحة كامل كذا :


    كود PHP:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=windows-1256" /><title>كـراك للتصميم</title><style>.krak{    border:1px #999999 dashed;    height:15px;    width:80px;    font-family:Tahoma;    font-size:12px;    background:#F8F8F8;    color:#CC0099;    padding:0px 0px 0px 0px;    text-align:center;    position:relative;}</style></head><body><p class="krak">كراك للتصميم</p></body></html>

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

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

    انا عطيته خاصية
    1 - تغير لون الخط .
    2 - تغير لون الخلفية .
    3 - تسطير للخط .
    و هذي هي الاكواد :



    كود PHP:
    .krak:hover{    background:#FFFFCC;    color:#009933;    text-decoration:underline;}

    كود PHP:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=windows-1256" /><title>كـراك للتصميم</title><style>.krak{    border:1px #999999 dashed;    height:15px;    width:80px;    font-family:Tahoma;    font-size:12px;    background:#F8F8F8;    color:#CC0099;    padding:0px 0px 0px 0px;    text-align:center;    position:relative;}.krak:hover{    background:#FFFFCC;    color:#009933;    text-decoration:underline;}</style></head><body><p class="krak">كراك للتصميم</p></body></html>

    -------

    الان
    ما بقى الا نضيف له ارتباط تشعبي
    نروح لكود الزر [ الداف ]
    و نضيف كلاس خاص للرابط



    كود PHP:
    <class="krak"><class="rab6" href="http://www.iq-team.org"></a>كراك للتصميم</p>

    rab6 : هذا الكلاس للرابط .
    --------------
    الان
    نعطي الرابط خصائص له
    و بتكون هذي
    اهم شي نعطيه نفس طول + عرض الزر
    و بتكون كذا



    كود PHP:
    a.rab6{    height:15px;    width:80px;    display:block;    position:absolute;}

    -------------
    و هذي الاكواد كامله لدرسنا



    كود PHP:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=windows-1256" /><title>كـراك للتصميم</title><style>.krak{    border:1px #999999 dashed;    height:15px;    width:80px;    font-family:Tahoma;    font-size:12px;    background:#F8F8F8;    color:#CC0099;    padding:0px 0px 0px 0px;    text-align:center;    position:relative;}.krak:hover{    background:#FFFFCC;    color:#009933;    text-decoration:underline;}a.rab6{    height:15px;    width:80px;    display:block;    position:absolute;}</style></head><body><p class="krak"><a class="rab6" href="http://www.iq-team.org"></a>كراك للتصميم</p></body></html>

    أخـوكم
    :


     


    جاري تحميل الصفحة...
  2. غير متصل

    Error
    rankrank
    V • I • P

    عضو منذ:
    ‏3 ابريل 2012
    عدد المشاركات:
    الإعجابات المتلقاة:
    1
    نقاط الجائزة:
    الإقامة:

    رد: درس بسيط عمل زر بتقنية Css روعه

    مبدع اخي


    :{8}:​
     


  3. غير متصل

    آرْ بْيْ جْيْ ڪْرْڪْوْڪْ
    DeveloPer Plus

    عضو منذ:
    ‏24 أغسطس 2015
    عدد المشاركات:
    الإعجابات المتلقاة:
    0
    نقاط الجائزة:

    رد: درس بسيط عمل زر بتقنية Css روعه

    مبدع+استمر
     


  4. غير متصل

    SerAno
    rank
    Developer

    عضو منذ:
    ‏19 ديسمبر 2014
    عدد المشاركات:
    الإعجابات المتلقاة:
    0
    نقاط الجائزة:

    رد: درس بسيط عمل زر بتقنية Css روعه

    شكرا يعطيك العافيه
     


مشاركة هذه الصفحة

جاري تحميل الصفحة...