مرحبا بكم في هده تدوينة حصرية في معلومات ويب التي اشرح لكم كيفية انشاء قائمة افقية للمبتدء وايضا وطرق وبعض خصائص لتكون مميزة وجميلة , وايضا كيف وضع ايقونات امام كل قسم , انا ساشرح لك طريقة بشكل بسيط وانت تقوم بوضع لمستك في تصميم وفي الوان .
وقبل كل شيء يجب عليك ان تتعلم لغة 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 هي مسؤولة عن كيفية عرضها في شكل الحقيقي وايضا ستايل خاص بها
الكود الدي ساضعه الان هو من اجل جعل الاقسام في سطر واحد
خاص بي <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; }
ليست هناك تعليقات: