منتديات بروجروماتيك التعليمية

[كود] قائمة افقية بتقنية css تعمل مع كل نسخ الفى بى و أحلى منتدى مجانا من منتديات القمة التعليمية

اذهب الى الأسفل

[كود] قائمة افقية بتقنية css تعمل مع كل نسخ الفى بى و أحلى منتدى مجانا من منتديات القمة التعليمية

مُساهمة من طرف عابر سبيل في الأربعاء أبريل 27, 2016 2:55 pm

[كود] قائمة افقية بتقنية css تعمل مع كل نسخ الفى بى و أحلى منتدى مجانا من منتديات القمة التعليمية


اقدم لكم كود قائمه افقية بتقنية css
من شركة انكور التطويرية


صور للكود






--





وعدل على الروابط و العناوين كما تريد


الاكواد

كود css



الكود:
ribbon span { background:#A81B6A; display:inline-block; line-height:3em; padding:0 1em; margin-top:0.5em; position:relative; -webkit-transition: background-color 0.2s, margin-top 0.2s; /* Saf3.2 , Chrome */ -moz-transition: background-color 0.2s, margin-top 0.2s; /* FF4 */ -ms-transition: background-color 0.2s, margin-top 0.2s; /* IE10 */ -o-transition: background-color 0.2s, margin-top 0.2s; /* Opera 10.5 */ transition: background-color 0.2s, margin-top 0.2s; color:white; } .ribbon a:hover span { background:#FFD204; margin-top:0; } .ribbon span:before { content: ""; position:absolute; top:3em; left:0; border-right:0.5em solid #9B8651; border-bottom:0.5em solid #fff; } .ribbon span:after { content: ""; position:absolute; top:3em; right:0; border-left:0.5em solid #9B8651; border-bottom:0.5em solid #fff; } .ribbon a:link, .ribbon a:visited { color:#000; text-decoration:none; float:left; height:3.5em; overflow:hidden; } .ribbon:after, .ribbon:before { margin-top:0.5em; content: ""; float:left; border: 1.5em solid #A81B6A; } .ribbon:after { border-right-color:transparent; } .ribbon:before { border-left-color:transparent; }






كود HTML


الكود:
<div class="ribbon">
 <a href="ضع رابط "><span>اتصل بنا</span></a> <a href="ضع رابط"><span>حصرياتنا</span></a> <a href="ضع رابط"><span>خدماتنا</span></a> <a href="ضع رابط"><span>تطوير المواقع</span></a> <a href="ضع رابط"><span>دليل المواقع</span></a> <a href="ضع رابط"><span>اعمالنا</span></a> <a href="ضع رابط"><span>انكور</span></a>
</div>







لست شخصا [ندعوك للتسجيل في المنتدى أو التعريف بنفسك لمعاينة هذا الرابط] ..
لكننى لا [ندعوك للتسجيل في المنتدى أو التعريف بنفسك لمعاينة هذا الرابط] و لا [ندعوك للتسجيل في المنتدى أو التعريف بنفسك لمعاينة هذا الرابط] ..
و لا [ندعوك للتسجيل في المنتدى أو التعريف بنفسك لمعاينة هذا الرابط] أحد بأشياء [ندعوك للتسجيل في المنتدى أو التعريف بنفسك لمعاينة هذا الرابط] ..
avatar
عابر سبيل
مدير الموقع
مدير الموقع

الجنس : ذكر
الدوله : مصر
المهنه :
الهوايه :
نوع المتصفح :
الحاله :
عدد المساهمات : 270
نقاط : 754
السٌّمعَة : 9
تاريخ الميلاد : 01/01/1995
تاريخ التسجيل : 07/09/2015

معاينة صفحة البيانات الشخصي للعضو http://progromatic.ahlamontada.com

الرجوع الى أعلى الصفحة اذهب الى الأسفل

الرجوع الى أعلى الصفحة


 
صلاحيات هذا المنتدى:
لاتستطيع الرد على المواضيع في هذا المنتدى