[Blog-Add]

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

اقدم لكم اليوم اربع قوائم تم تصميمهم عن طريق HTML - CSS تستطيع استخدامهم في مدونتك

او تصميم لصفحة معينه تحتاجها فطبعا لها اكثر من استخدام نتركم مع الاكواد

صورة القوائم :



كود 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>
  <!-- معهد خبراء بلوجر --> 


تمنياتي لكم بالتوفيق واتمني الموضوع يعجبكم