مساحة إعلانية

الثلاثاء، 21 أكتوبر 2014

الثلاثاء، 21 أكتوبر 2014

أنشاء قائمة أفقية مميزة ورائعة


مرحبا بكم في هده تدوينة حصرية في معلومات ويب التي اشرح لكم كيفية انشاء قائمة افقية للمبتدء وايضا وطرق وبعض خصائص لتكون مميزة وجميلة , وايضا كيف وضع ايقونات امام كل قسم , انا ساشرح لك طريقة بشكل بسيط وانت تقوم بوضع لمستك في تصميم وفي الوان .

وقبل كل شيء يجب عليك ان تتعلم لغة html وايضا css لكي تكون خبرة وايضا من اجل حل مشاكل واخطاء التي تقع فيها

الان نبداء هده كود خاص بقائمة ويجد في اقسام يمكن زيادة ويمكن انقاص لا حاجة لوضع كل ما تبذلونه من صفحات لها أن تبقى واضحة للزائر تصفح موقع الويب الخاص بك سيكون أكثر سهولة.


رمز Code:
 <ul id="menu_horizontal">

    <li><a href="accueil.php">Accueil</a></li>

    <li><a href="news.php">News</a></li>

    <li><a href="livreor.php">Livre d'or</a></li>

    <li><a href="contact.php">Contact</a></li>

    <li><a href="admin.php">Admin</a></li>

    </ul>
والان كيفية وضع القائمة لدينا أفقيا من خلال CSS؟

css هي مسؤولة عن كيفية عرضها في شكل الحقيقي وايضا ستايل خاص بها

الكود الدي ساضعه الان هو من اجل جعل الاقسام في سطر واحد

خاص بي <li>

رمز Code:
 /* Je sélectionne les <li> du menu horizontal */
    ul#menu_horizontal li {
    display : inline;
    padding : 0 0.5em; /* Pour espacer les boutons entre eux */
    }
    ul#menu_horizontal {
    list-style-type : none; /* Car sinon les puces se placent n'importe où */
    }
والان كيف تغير مكان اي قسم في اي جهة تريده يمين او أنشاء قائمة أفقية مميزة ورائعة

في بعض احيان تريد جعل قسمين في يمين وباقي في يسار عندما تكون مدونتك اجنبية واد كانت عربية قم بالعكس فقط

قم بتغير بسيط على كود الاول

اليك شكل

رمز Code:
<ul id="menu_horizontal">

    <li class="bouton_gauche"><a href="accueil.php">Accueil</a></li>

    <li class="bouton_gauche"><a href="news.php">News</a></li>

    <li class="bouton_gauche"><a href="livreor.php">Livre d'or</a></li>

    <li class="bouton_droite"><a href="admin.php">Admin</a></li>

    <li class="bouton_droite"><a href="contact.php">Contact</a></li>

    </ul>
تغير بسيط فقط

هدا كود css لنجاح عملية

رمز Code:
ul#menu_horizontal {  /*Ici , c'est ma configuration, à vous de la changer */

    width : 600px;

    height : 25px;

    list-style-type : none; /* Car sinon les puces se placent n'importe où */

    }

    ul#menu_horizontal li {

    padding : 0 0.5em; /* Pour espacer les boutons entre eux */

    }

    li.bouton_gauche {

    float : left;

    }

    li.bouton_droite {

    float : right;

    }
صورة عن شكل

أنشاء قائمة أفقية مميزة ورائعة
والان كيف وضع ايقونات بجانب اقسام

من اجل ان تكون قائمة جميلة وانيقة اضف ايقونات من اجل تزين فقط ليس شيء اجباري هدا هو كود

فقط ابحت عن طول صورة لكل قسم وتكون بصيغة .png وضعها اليك شكل كود نهائي

رمز Code:
 <ul id="menu_horizontal">

    <li class="bouton_gauche"><a href="#"><img src="accueil.png" alt="accueil" />Accueil</a></li>

    <li class="bouton_gauche"><a href="#"><img src="news.png" alt="news" />News</a></li>

    <li class="bouton_gauche"><a href="#"><img src="livredor.png" alt="livre d'or" />Livre d'or</a></li>

    <li class="bouton_droite"><a href="#"><img src="team.png" alt="admin" />Admin</a></li>

    <li class="bouton_droite"><a href="#"><img src="mp.png" alt="contact"/>Contact</a></li>

    </ul>

الان نظيف كود css لكي يظهر شكل حقيقي والاخير للقائمة رائسية  

    ul#menu_horizontal {

    width : 600px;

    height : 30px;

    margin : 2em 0 0 0;

    padding : 0;

    background-color : #f4f9fd;

    border : 1px dashed black;

    list-style-type : none;

    }

    ul#menu_horizontal li {

    padding : 0 0.5em; 

    line-height : 30px;

    }

    ul#menu_horizontal li.bouton_gauche {

    float : left;

    border-right : 1px dashed black;

    }

    ul#menu_horizontal li.bouton_droite {

    float : right;

    border-left : 1px dashed black;

    }

    ul#menu_horizontal a {

    color : black;

    text-decoration : none;

    padding : 0 0.5em;

    font :  0.8em "Trebuchet MS";

    }

    ul#menu_horizontal a:hover { text-decoration : underline; }

    ul#menu_horizontal a img {

    border : none;

    padding :  0 0.3em;

    }
انتهي الدرس ان شاء الله يفيدكم وسلام عليكم

ليست هناك تعليقات:

جميع الحقوق محفوظة لــ عالم تقنيات وبرامج 2017 ©