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

محروم.كوم · #1 09-10-2014, 05:20 PM

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

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

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

Accueil

News

Livre d'or

Contact

Admin

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

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

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

خاص بي

/* Je sélectionne les 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ù */
}

والان كيف تغير مكان اي قسم في اي جهة تريده يمين او

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

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

اليك شكل

Accueil

News

Livre d'or

Admin

Contact

تغير بسيط فقط

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

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 وضعها اليك شكل كود نهائي

Accueil

News

Livre d'or

Admin

Contact

الان نظيف كود 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;

}

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

المواضيع المتشابهه
الموضوع	كاتب الموضوع	المنتدى	مشاركات	آخر مشاركة
انشودة مميزة ورائعة mp3	محروم.كوم	منتدى أخبار المواقع والمنتديات العربية والأجنبية	0	09-07-2014 10:00 PM
نغمة مميزة ورائعة	محروم.كوم	منتدى أخبار المواقع والمنتديات العربية والأجنبية	0	12-24-2012 11:10 PM
نغمة مميزة ورائعة على آلة الفلوت	محروم.كوم	منتدى أخبار المواقع والمنتديات العربية والأجنبية	0	09-09-2012 06:50 AM
نغمة مميزة ورائعة على آلة الفلوت	محروم.كوم	منتدى أخبار المواقع والمنتديات العربية والأجنبية	0	09-09-2012 05:10 AM
قائمة في html	محروم.كوم	منتدى أخبار المواقع والمنتديات العربية والأجنبية	0	08-23-2009 05:00 AM