شاطر
اذهب الى الأسفل
avatar
المدير العام
المدير العام
][ آلمًزٍآجٍُ ][ :
][ آلهِوٍآيةٍْ][ :
][ آلمِهْنَةَ ][ :
][ آلدَوٍلْةَ ][ :
][ آلجِنَـسًٍ ][ : ذكر
][ آلمُشآإركآإت ][ : 64
][ آلتسجيل ][ : 04/08/2016
][ آلعٌمـْرٍ][ : 32
معاينة صفحة البيانات الشخصي للعضوhttp://m33m.rigala.net

كود يظهر الاقسام الفرعية بشكل جذاب

في السبت أغسطس 13, 2016 9:24 am
الكود هو عبارة عن شكل جديد لاقسام الفرعية في المنتدى
صوره كمثال




نتوجه الى:




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




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


الرجوع الى أعلى الصفحة
صلاحيات هذا المنتدى:
لاتستطيع الرد على المواضيع في هذا المنتدى