تقنية جديدة تجعل الاقسام الفرعية بشكل جذاب

تقنية جديدة تجعل الاقسام الفرعية بشكل جذاب
الكود هو عبارة عن شكل جديد لاقسام الفرعية في المنتدى
صوره كمثال

نتوجه الى:

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

لوحة الاداره >> ادارة عامة >> منتدى >> المنتديات والفائات>>
وندخل الى اى قسم ونضغط على ايقونة تعديل ,
مثال؟

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

الكود::   <table>

   <tbody>
   <tr>

   <td>

   <div class="desc10">

   <div class="class1">
   <a href="رابط القسم"><span style="color: #FFFFFF;
   font-weight: bold;"> اسم القسم </span></a><br />
   </div>

   <div class="class1">
   <a href="رابط القسم"><span style="color: #FFFFFF;
   font-weight: bold;"> اسم القسم </span></a><br />
   </div>

   <div class="class1">
   <a href="رابط القسم"><span style="color: #FFFFFF;
   font-weight: bold;"> اسم القسم </span></a><br />
   </div>

   <div class="class1">
   <a href="رابط القسم"><span style="color: #FFFFFF;
   font-weight: bold;"> اسم القسم </span></a><br />
   </div>

   <div class="class1">
   <a href="رابط القسم"><span style="color: #FFFFFF;
   font-weight: bold;"> اسم القسم </span></a><br />
   </div>

   </div>

   </td>

   <td>

   <div class="desc9">

   <div class="class1">
   <a href="رابط القسم"><span style="color: #FFFFFF;
   font-weight: bold;"> اسم القسم </span></a><br />
   </div>

   <div class="class1">
   <a href="رابط القسم"><span style="color: #FFFFFF;
   font-weight: bold;"> اسم القسم </span></a><br />
   </div>

   <div class="class1">
   <a href="رابط القسم"><span style="color: #FFFFFF;
   font-weight: bold;"> اسم القسم </span></a><br />
   </div>

   <div class="class1">
   <a href="رابط القسم"><span style="color: #FFFFFF;
   font-weight: bold;"> اسم القسم </span></a><br />
   </div>

   <div class="class1">
   <a href="رابط القسم"><span style="color: #FFFFFF;
   font-weight: bold;"> اسم القسم </span></a><br />
   </div>

   </div>

   </td>

   </tr>

   </tbody>
   </table

ثم نضع الكود التالى اذا ارت ذيادة عدد الاقسام يمكنك تزويده بهذا الكود

الكود::    <div class="class1">
   <a href="رابط القسم"><span style="color: #FFFFFF;
   font-weight: bold;"> اسم القسم </span></a><br />
   </div>

لأن نتوجه الى:

ورقة تصميم css
لوحة الاداره >> مظهر المنتدى >> الصور والألوان >> ألوان >> ورقة تصميم css
تعطيل كود ال CSS الأصلي: لا
تفعيل نظام تحسين مردودية ال CSS المشخص: نعم
ثم اضف هذا الكود الى ورقة تصميم css

الكود:: /**تقنية جديدة تجعل الاقسام الفرعية بشكل جذاب**/
   .class1 {
   opacity: 0.8;
   width: 120px;
   margin-bottom: 2px;
   -webkit-transition: all 0.4s linear;
   background-color: #096EA1;
   font-family: bold;
   font-size: 10.5px;
   padding: 2px 0px 2px 10px;
   line-height: 120%;
   border-right: 15px solid #454C1F;
   border-radius: 30px 30px 30px 30px;
   list-style-type: none;
   text-align: right;
   }
   .class1:hover{
   opacity:1;
   border-left:30px solid #454C1F7;/*لون جنب اليسار*/
   background-color:#075A96;/*لون خلفية عند مرور الماوس على اسم القسم */
   border-radius:30px 30px 30px 30px;
   color: #000;
   }
   .desc9 {
   width: 140px;
   height: 80px;
   /* margin-top: -25px; */
   padding: 20px display: block;
   margin-left: 15px;
   }
   .desc10 {
   width: 140px;
   height:54px;
   margin-top: -25px;
   padding: 20px;
   display: block;
   }
   /**تقنية جديدة تجعل الاقسام الفرعية بشكل جذاب**/

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

» الكود يضع اسم الاقسام بطريقه جميله مقتبسه من الفى بى
» المنتديات الفرعية تظهر بشكل عامودي بدل افقي
» إجعل الأقسام الفرعية بشكل عمودي تلقائيا دون اي تعديلات
» كود حالات الاقسام الثلاثة تحت بعضها كما فى الفى بى
» جعل الاقسام الثانوية تظهر بشكل عامودي بدل افقي