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

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

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

مُساهمة من طرف وهبة الساحر 9/7/2015, 1:32 am

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

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

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

صوره كمثال


نتوجه الى:

تقنية جديدة تجعل الاقسام الفرعية بشكل جذاب 23k6cl1
https://2img.net/h/oi59.tinypic.com/23k6cl1.png

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


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

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

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



عدل سابقا من قبل وهبة الساحر في 13/7/2015, 6:39 pm عدل 1 مرات
وهبة الساحر
وهبة الساحر
 
 

ذكر
عدد المساهمات : 9060
معدل النشاط : 14835
السُمعة : 135

https://3arb-way.yoo7.com

الألحان المرحة يعجبه هذا الموضوع

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

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

- مواضيع مماثلة

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