مـنتديـــات ستــــــار فــــــــــلاش
أجمل أكواد  Gwgt0n1m5651305796

انضم إلى المنتدى ، فالأمر سريع وسهل

مـنتديـــات ستــــــار فــــــــــلاش
أجمل أكواد  Gwgt0n1m5651305796
مـنتديـــات ستــــــار فــــــــــلاش
هل تريد التفاعل مع هذه المساهمة؟ كل ما عليك هو إنشاء حساب جديد ببضع خطوات أو تسجيل الدخول للمتابعة.

أجمل أكواد

2 مشترك

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

أجمل أكواد  Empty أجمل أكواد

مُساهمة من طرف yassine الإثنين أكتوبر 04, 2010 11:10 am

السلام عليكم ورحمة الله وبركاته ،،

سأخصص هذا الموضوع لنشرالأكواد المهمة والجميلة بإستخدام CSS ..

بسم الله نبدأ ..

أول كود .. قائمة أقسام موقع ..

مثال :


كيفية التطبيق:

ضع هذا الكود ضمن الستايل شيت اذا ما خصصت ملف لجلبه او ضمن الصفحة نفسها اذا لم تخصص صفحة منفصلة له .




<style type="text/css">

/* */
/*URL: [ندعوك للتسجيل في المنتدى أو التعريف بنفسك لمعاينة هذا الرابط] */

#modernbricksmenu{
padding: 0;
width: 100%;
background: transparent;
voice-family: ""}"";
voice-family: inherit;
}

#modernbricksmenu ul{
font: bold 11px tahoma;
margin:0;
margin-left: 40px; /*margin between first menu item and left browser edge*/
padding: 0;
list-style: none;
}

#modernbricksmenu li{
display: inline;
margin: 0 2px 0 0;
padding: 0;
text-transform:uppercase;
}

#modernbricksmenu a{
float: left;
display: block;
color: white;
margin: 0 1px 0 0; /*Margin between each menu item*/
padding: 5px 10px;
text-decoration: none;
letter-spacing: 1px;
background-color: black; /*Default menu color*/
border-bottom: 1px solid white;
}

#modernbricksmenu a:hover{
background-color: gray; /*Menu hover bgcolor*/
}

#modernbricksmenu #current a{ /*currently selected tab*/
background-color: #D25A0B; /*Brown color theme*/
border-color: #D25A0B; /*Brown color theme*/
}

#modernbricksmenuline{
clear: both;
padding: 0;
width: 100%;
height: 5px;
line-height: 5px;
background: #D25A0B; /*Brown color theme*/
}

#myform{ /*CSS for sample search box. Remove if desired */
float: right;
margin: 0;
padding: 0;
}

#myform .textinput{
width: 190px;
border: 1px solid gray;
}

#myform .submit{
font: bold 11px tahoma;
height: 22px;
background-color: lightyellow;
}

</style>




ثم أضف هذا الكود وأجري عليه التغيرات اللازمة من روابط وعناوين الروابط ..



<div id="modernbricksmenu">
<ul>
<li style="margin-left: 1px"><a href="http://www.zajildot.com" title="zajil">zajil</a></li>
<li><a href="http://www.zajildot.com/" title="zajil">zajil</a></li>
<li id="current"><a href="http://www.zajildot.com/" title="zajil">zajil</a></li>
<li><a href="http://www.zajildot.com" title="zajil">zajil</a></li>
<li><a href="http://www.zajildot.com/forums/" title="zajil">zajil</a></li>
</ul>
<form id="myform">
<input type="text" class="textinput" /> <input class="submit" type="submit" value="Find" />
</form>
</div>

<div id="modernbricksmenuline">&nbsp;</div>



سأقوم بإضافة أكود لاحقاً .. أجمل أكواد  Smile

بالتوفيق .. ،



تحياتي ياسين
yassine
yassine
نائب المدير العام
نائب المدير العام

ذكر عدد المساهمات : 30
تاريخ التسجيل : 03/10/2010
العمر : 33
الموقع : www.starflach.yoo7.com

http://www.starflach.yoo7.com

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

أجمل أكواد  Empty رد: أجمل أكواد

مُساهمة من طرف Issam الثلاثاء أكتوبر 05, 2010 2:46 pm

شكرا جزيلا لك على الموضوع لكن المرجو في المرة القادمة توضيح عمل الكود أكثر
Issam
Issam
المدير العام
المدير العام

ذكر عدد المساهمات : 417
تاريخ التسجيل : 09/09/2010
العمر : 33

http://star-flash.co.cc

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

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

- مواضيع مماثلة

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