walid
11-01-2013, بتوقيت غرينيتش 04:10 PM
http://www.dzbatna.com/images/icons/iconrote.gif [css]: ط£طµظ†ط¹ ظ„ظƒ ظ†ط§ظپط¨ط§ط± ط§ط*طھط±ط§ظپظٹ ط¨طھظ‚ظ†ظٹط© ط§ظ„ظ€css ! (http://www.dzbatna.com/t1985491/)
السلام عليكم ورحمة الله وبركاته
كـ عآدتي دائمـآ
أجيب لكم حاجات رآئعة تفيدكم وتفيد مواقعكم http://www.ibtkart.net/wp-includes/images/smilies/icon_smile.gif
وآلحين جبت لكم
نافبار شبه احترافي يعمل بتقنية css الرائعة !
شاهد المثال هنا (http://www.ibtkart.net/ib/navbar.htm)
************************************************
والآن نشوف الأكواد
+ شرح طريقةها
رمز Code:
a{ text-decoration: none; color: #b1b1b1; } #navbar{ background: #043e62; height: 30px; } #navbar ul{ list-style: none; } #navbar ul li{ float: right; } #navbar ul li a{ display: block; background-color: #043e62; padding: 5px; } #navbar ul li a:hover{ color: #000; background: #e7e7e7; }
أفتح برنامج الفرونت بيج أو أي محرر آخر ..
ثم أضف الكود code السابق .. واحفظ الملف بإسم
stylen.css
^ والآن شرح طريقة الكود code بالتفصيل :
رمز Code:
a{ text-decoration: none; color: #b1b1b1; }
من هنا نقدر نغيّر على شكل الروابط
رمز Code:
#navbar{ background: #043e62; height: 30px; }
وهنا راح نبدأ بالنافبار ..
background:
#043e62;
يعني خلفية النافبار .. غيّر كود code اللون وراح تتغير الخلفية معك
رمز Code:
#navbar ul{ list-style: none; }
هنا وضعنا list-style: none; يعني مايحط دوائر حول القائمة .. يعني مثل كذا :
http://www.ibtkart.net/wp-content/uploads/2014/11/list.png
رمز Code:
#navbar ul li{ float: right; }
هنا حطينا اتجاه روابط النافبار [يمين] .
رمز Code:
#navbar ul li a{ display: block; background-color: #043e62; padding: 5px; }
وهنا برضو background-color: #043e62; حط كود code لون النافبار
رمز Code:
#navbar ul li a:hover{ color: #000; background: #e7e7e7; }
والحين جينا لتأثير
الهوفر
أول شي
color: #000; هنا لون النص بعد مرور الماوس عليه
والثاني طبعا واضح
.. وهو لون خلفية النافبار بعد مرور الماوس عليه http://www.ibtkart.net/wp-includes/images/smilies/icon_smile.gif
ولا تنسى حفظ الملف
بإسم stylen.css
*********************************************
والحين نجي نطلع
النافبار
ضع هذا الكود code في أي
ملف Html
رمز Code:
<head>
<meta http-equiv=”Content-Type” content=”text/html; charset=windows-1256″> <link rel=”stylesheet” href=”stylen.css”> </head> <div id=”navbar”> <ul> <li><a href=”#”>الرئيسية</a></li> <li><a href=”#”>المنتدى forum</a></li> <li><a href=”#”>عن الموقع</a></li> <li><a href=”#”>أتصل بنا</a></li> </ul> </div>
واحفظ الملف بأي اسم وشوف النتيجه راح يطلع لك النافبار
تم رفع الملفات
اضغط هنا للتحميل
(http://www.ibtkart.net/wp-content/uploads/2014/11/navbar.zip)
او حمل من المرفقات
منقول من :
http://www.ibtkart.net/?p=28
(http://www.ibtkart.net/wp-content/uploads/2014/11/navbar.zip)
ألعاب الأندرويد مجانا و حصريا (http://www.apotox.info/forum)
الملفات المرفقة
http://www.traidnt.net/vb/images/attach/zip.gif navbar.zip (http://www.traidnt.net/vb/attachments/611561d1321461932-navbar.zip) (586 بايت, عدد مرات المشاهدة 99 مرة)
https://fbcdn-sphotos-d-a.akamaihd.net/hphotos-ak-ash4/482113_236967293114455_1193518507_n.png (http://www.dzbatna.com)
©المشاركات المنشورة تعبر عن وجهة نظر صاحبها فقط، ولا تُعبّر بأي شكل من الأشكال عن وجهة نظر إدارة المنتدى (http://www.dzbatna.com)©
السلام عليكم ورحمة الله وبركاته
كـ عآدتي دائمـآ
أجيب لكم حاجات رآئعة تفيدكم وتفيد مواقعكم http://www.ibtkart.net/wp-includes/images/smilies/icon_smile.gif
وآلحين جبت لكم
نافبار شبه احترافي يعمل بتقنية css الرائعة !
شاهد المثال هنا (http://www.ibtkart.net/ib/navbar.htm)
************************************************
والآن نشوف الأكواد
+ شرح طريقةها
رمز Code:
a{ text-decoration: none; color: #b1b1b1; } #navbar{ background: #043e62; height: 30px; } #navbar ul{ list-style: none; } #navbar ul li{ float: right; } #navbar ul li a{ display: block; background-color: #043e62; padding: 5px; } #navbar ul li a:hover{ color: #000; background: #e7e7e7; }
أفتح برنامج الفرونت بيج أو أي محرر آخر ..
ثم أضف الكود code السابق .. واحفظ الملف بإسم
stylen.css
^ والآن شرح طريقة الكود code بالتفصيل :
رمز Code:
a{ text-decoration: none; color: #b1b1b1; }
من هنا نقدر نغيّر على شكل الروابط
رمز Code:
#navbar{ background: #043e62; height: 30px; }
وهنا راح نبدأ بالنافبار ..
background:
#043e62;
يعني خلفية النافبار .. غيّر كود code اللون وراح تتغير الخلفية معك
رمز Code:
#navbar ul{ list-style: none; }
هنا وضعنا list-style: none; يعني مايحط دوائر حول القائمة .. يعني مثل كذا :
http://www.ibtkart.net/wp-content/uploads/2014/11/list.png
رمز Code:
#navbar ul li{ float: right; }
هنا حطينا اتجاه روابط النافبار [يمين] .
رمز Code:
#navbar ul li a{ display: block; background-color: #043e62; padding: 5px; }
وهنا برضو background-color: #043e62; حط كود code لون النافبار
رمز Code:
#navbar ul li a:hover{ color: #000; background: #e7e7e7; }
والحين جينا لتأثير
الهوفر
أول شي
color: #000; هنا لون النص بعد مرور الماوس عليه
والثاني طبعا واضح
.. وهو لون خلفية النافبار بعد مرور الماوس عليه http://www.ibtkart.net/wp-includes/images/smilies/icon_smile.gif
ولا تنسى حفظ الملف
بإسم stylen.css
*********************************************
والحين نجي نطلع
النافبار
ضع هذا الكود code في أي
ملف Html
رمز Code:
<head>
<meta http-equiv=”Content-Type” content=”text/html; charset=windows-1256″> <link rel=”stylesheet” href=”stylen.css”> </head> <div id=”navbar”> <ul> <li><a href=”#”>الرئيسية</a></li> <li><a href=”#”>المنتدى forum</a></li> <li><a href=”#”>عن الموقع</a></li> <li><a href=”#”>أتصل بنا</a></li> </ul> </div>
واحفظ الملف بأي اسم وشوف النتيجه راح يطلع لك النافبار
تم رفع الملفات
اضغط هنا للتحميل
(http://www.ibtkart.net/wp-content/uploads/2014/11/navbar.zip)
او حمل من المرفقات
منقول من :
http://www.ibtkart.net/?p=28
(http://www.ibtkart.net/wp-content/uploads/2014/11/navbar.zip)
ألعاب الأندرويد مجانا و حصريا (http://www.apotox.info/forum)
الملفات المرفقة
http://www.traidnt.net/vb/images/attach/zip.gif navbar.zip (http://www.traidnt.net/vb/attachments/611561d1321461932-navbar.zip) (586 بايت, عدد مرات المشاهدة 99 مرة)
https://fbcdn-sphotos-d-a.akamaihd.net/hphotos-ak-ash4/482113_236967293114455_1193518507_n.png (http://www.dzbatna.com)
©المشاركات المنشورة تعبر عن وجهة نظر صاحبها فقط، ولا تُعبّر بأي شكل من الأشكال عن وجهة نظر إدارة المنتدى (http://www.dzbatna.com)©
