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

اذهب الى الأسفل

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

مُساهمة من طرف وهبة الساحر في الخميس 9 يوليو 2015 - 0:32

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

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

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

صوره كمثال


نتوجه الى:


http://i59.tinypic.com/23k6cl1.png

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

http://i61.tinypic.com/2hcp7b6.png
     

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


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

ارجوا ان اكون قد افدتكم
انتهي الموضوع




عدل سابقا من قبل وهبة الساحر في الإثنين 13 يوليو 2015 - 17:39 عدل 1 مرات
avatar
وهبة الساحر
 
 

ذكر
عدد المساهمات : 9862
معدل النشاط : 12403
السُمعة : 125

http://3arb-way.a7larab.net/

الرجوع الى أعلى الصفحة اذهب الى الأسفل

الرجوع الى أعلى الصفحة


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