| Blog-Add |
02-04-2014 05:14 PM |
اكواد قوائم HTML - css بلوجر - اضافات بلوجر
السلام عليكم ورحمة الله وبركاتة
اقدم لكم اليوم اربع قوائم تم تصميمهم عن طريق HTML - CSS تستطيع استخدامهم في مدونتك
او تصميم لصفحة معينه تحتاجها فطبعا لها اكثر من استخدام نتركم مع الاكواد
صورة القوائم :
http://www.arabsharing.com/uploads/1391533911041.jpg
كود css :
كود PHP:
<style type="text/css" rel="stylesheet">
table{
/* حدود الجدول */
border-collapse:collapse;
}
/*خواص الصفوف */
.taula_menu tr{
border-top:dotted 1px #02223E;
}
/* خواص الأعمدة */
.taula_menu td{ background-color:#FFAFAF; width:100px;
font:bold 12px Arial;
text-align:center; } .taula_menu td:hover{ background-color:#CF4D4D; font:bold 14px Arial; } /* Propietats de les columnes */ .taula_menu_2 td{
background-color:#AFE3FF;
vertical-align:top;
width:70px;
font:bold 12px Arial;
text-align:center;
border-top:solid 4px #02223E;
} .taula_menu_2 td:hover{
background-color:#AFE3FF;
color:#175A7F;
text-align:center;
border-top:solid 4px orange;
}
span
{
border:1px solid #000000;
padding:4px;
margin:0px;
font:bold 12px Arial;
background-color:green;
color:#ffffff;
width:120px;
}
p
{
padding:0;
margin:3px;
font:bold 12px Verdana;
color:#ffffff;
background-color:orange;
width:120px;
padding:4px;
}
a:hover
{
color:yellow;
}
a{
text-decoration:none;
color:#ffffff;
}
</style>
ثم نأتي لاكواد HTML :
القائمة الاولي :
كود PHP:
<!-- القائمة الأولى -->
<table class="taula_menu" border="1" cellpadding="4" cellspacing="0">
<tr><td>الأسم</td></tr>
<tr><td>الأسم</td></tr>
<tr><td>الأسم</td></tr>
<tr><td>الأسم</td></tr>
<tr><td>الأسم</td></tr>
<tr><td>الأسم</td></tr>
</table>
<!-- معهد خبراء بلوجر -->
القائمة الثانية :
كود PHP:
<!-- القائمة الثانية -->
<table class="taula_menu_2" border="1" cellpadding="4" cellspacing="0">
<tr>
<td>الأسم</td>
<td>الأسم</td>
<td>الأسم</td>
<td>الأسم</td>
<td>الأسم</td>
<td>الأسم</td>
</tr>
</table>
<!-- معهد خبراء بلوجر -->
القائمة الثالثة :
كود PHP:
<!-- القائمة الثالثة -->
<span>الأسم</span>
<span>الأسم</span>
<span>الأسم</span>
<span>الأسم</span>
<span>الأسم</span>
<span>الأسم</span>
<!-- معهد خبراء بلوجر -->
كود PHP:
<!-- القائمة الرابعة -->
<p><a href="direccio_web">الأسم </a></p>
<p><a href="direccio_web">الأسم</a></p>
<p><a href="direccio_web">الأسم</a></p>
<p><a href="direccio_web">الأسم</a></p>
<p><a href="direccio_web">الأسم</a></p>
<p><a href="direccio_web">الأسم</a></p>
<p><a href="direccio_web">الأسم</a></p>
<p><a href="direccio_web">الأسم</a></p>
<!-- معهد خبراء بلوجر -->
تمنياتي لكم بالتوفيق واتمني الموضوع يعجبكم |
