إعلانك هنا
إعلانك هنا
إعلانك هنا
إعلانك هنا
إعلانك هنا
السلام عليكم بعد غياب طويل و انقطاع عن التدوين نعود لكم و بشدة من اجل تحقيق هدفنا الاسمى و هو جعل المدون العربي قادر على تصميم اضافاته قوالبه و كل شيء بنفسه و في اطار هذا المنظور نقدم لكم اليوم درس متكامل باذن الله لتركيب قائمة افقية جذابة بالوان لا توصف انما ترى بمثال مباشر:
<head>ثم اضف اكواد الخطوط تحت الوسم السابق و هي:
<link href='//maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css' rel='stylesheet'/> <link href='http://cdn.jsdelivr.net/darfonts/0.1/dinone-dintwo-sstext-ssthree/stylesheet.css' rel='stylesheet'/>بهذه الطريقة نكون انتهينا من تركيب الخطوط و نمر الى اكواد القائمة :
أكواد CSS :
نبحث عن الوسم التالي في القالب:
]]></b:skin>ثم نضيف فوقه الاكواد التالية:
.Menu-nav {background: #575757;height: 73px;width: 1020px;margin: 5px auto;border-bottom: solid 3px #3897C5;} .Menu-nav ul {margin:0;padding:0;} .Menu-nav ul li {float:right;} .Menu-nav ul li a {color: #fff;padding: 16px 12px 15px;line-height: 68px;font-size: 16px;font-family: ge_ss_threeregular;} .Menu-nav ul li a:hover {background: #48B5E9; color: #fff; transition: 0.2s; padding: 22px 12px 28px;} .nav1 {margin: 0 auto;width: 1000px;} .Menu-nav ul li a.active {font-size: 16px;padding: 22px 21px 26px 19px;background: #474747;color: #fff;line-height: 70px;} .nav1 {margin:0 auto;width: 1025px;}القيمة 73 تمثل ارتفاع القائمة اما القيمة 1020 تمثل عرض القائمة يمكنك تغييرهما كبف تشاء.
أكواد HTML :
يمكنك اضافة هته الاكواد في القالب اينما تشاء بالنسبة لي سوف اضيف القائمة فوق الوسم:
'main-wrapper'و الاكواد هي كالتالي:
<div class="Menu-nav"> <div class="nav1"> <ul> <li><a class="active" href="/"><i class="fa fa-home" style="padding:7px;"></i>الرئيسية</a></li> <li><a href="#"><i class="fa fa-pencil" style="padding:7px;"></i>مقالات</a></li> <li><a href="#"><i class="fa fa-windows" style="padding:7px;"></i>ويندوز</a></li> <li><a href="#"><i class="fa fa-truck" style="padding:7px;"></i>مجانيات</a></li> <li><a href="#"><i class="fa fa-facebook-square" style="padding:7px;"></i>فيس بوك</a></li> <li><a href="#"><i class="fa fa-google-plus-square" style="padding:7px;"></i>جوجل</a></li> <li><a href="#"><i class="fa fa-newspaper-o" style="padding:7px;"></i>اخبار الانترنيت</a></li> <li><a href="#"><i class="fa fa-code" style="padding:7px;"></i>التصميم والبرمجة</a></li> <li><a href="#"><i class="fa fa-apple" style="padding:7px;"></i>ابل</a></li> </ul> </div> </div>غير الكلمات و العلامة # بكلمات و روابط الاقسام التي تريدها.
ليست هناك تعليقات :
يسعدنا تفاعلكم بالتعليق , لكن يرجى مراعاة الآداب العامة وعدم نشر روابط إشهار حتى ينشر التعليق , ولا ننشر تعليق يخص مدونات تخالف الشريعة الإسلامية , اما لو لديك سؤال خارج الموضوع يرجى الإتصال بنا , واحب ان انبهك انه عند تعليقك تستطيع متابعة التعليق من خلال " إعلامي " الموجودة اسفل يسار الصندوق.