تقنية جديدة تجعل الاقسام الفرعية بشكل جذاب
الكود هو عبارة عن شكل جديد لاقسام الفرعية في المنتدى
صوره كمثال
لوحة الاداره >> ادارة عامة >> منتدى >> المنتديات والفائات>>
وندخل الى اى قسم ونضغط على ايقونة تعديل ,
مثال؟
ثم نضع الكود التالى اذا ارت ذيادة عدد الاقسام يمكنك تزويده بهذا الكود الكود هو عبارة عن شكل جديد لاقسام الفرعية في المنتدى
صوره كمثال
نتوجه الى:
لوحة الاداره >> ادارة عامة >> منتدى >> المنتديات والفائات>>
وندخل الى اى قسم ونضغط على ايقونة تعديل ,
مثال؟
- الكود:
<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;
}
/**تقنية جديدة تجعل الاقسام الفرعية بشكل جذاب**/
تم الشرح بواسطة
وهبة الساحر
منقووول
وهبة الساحر
منقووول