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

  Bài viết hay nhất1
تقنية جديدة تجعل الاقسام الفرعية بشكل جذاب
الكود هو عبارة عن شكل جديد لاقسام الفرعية في المنتدى

صوره كمثال


نتوجه الى:



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



الكود:
      <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;
                }
                /**تقنية جديدة تجعل الاقسام الفرعية بشكل جذاب**/

تم الشرح بواسطة
وهبة الساحر

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